/* ============================================================================
 * RANGLISTEN-KARTE (Taskwerk #374, 13.09.2026)
 * ----------------------------------------------------------------------------
 * Ausgezogen aus css/dashboard.css, weil die Karte seitdem auf ZWEI Seiten
 * steht: dashboard.html (die drei uebergreifenden Wertungen) und
 * mordheim-hub.html (die sieben Mordheim-Wertungen). Der Hub laedt
 * dashboard.css nicht, und das ganze Blatt fuer eine Karte mitzuladen hiesse,
 * tausende fremde Regeln auf eine zweite Seite zu holen.
 *
 * Die Regeln darunter stehen unveraendert und in ihrer alten Reihenfolge.
 * Die Zeilen- und Leer-Regeln (leader-, no-data-, clickable-warband) waren
 * allgemein benannt, benutzt hat sie aber allein die Karte — und
 * player-profile-modal.js die Leer-Regel, auf dem Dashboard, wo diese Datei
 * ebenfalls liegt.
 *
 * NEU ist nur der Rahmen (rl-card, rl-card-kopf). Die Karte trug bis dahin
 * die allgemeinen Klassen card und card-header aus dashboard.css; im Hub
 * fehlen die, und layout.css zeichnet dort einen anderen Kopf. Die Werte sind
 * am Dashboard GEMESSEN, nicht abgeschrieben: Beim Kopf gewann dort layout.css
 * den Innenabstand und den Rand, dashboard.css den Rest — genau so steht es
 * jetzt hier, einschliesslich der Stufen bei 900px und 480px.
 * ========================================================================== */

/* Schriftfarbe und Zeilenhoehe gehoeren zum Rahmen, nicht zur Seite: Im Hub
   traegt body keine Farbe, dort erbte die Karte gemessen Schwarz und
   `line-height: normal` (CLAUDE.md §9, Vererbungsluecke). Die Werte sind die,
   die sie auf dem Dashboard vom body erbt. */
/* Seit dem 28.09.2026 eine tc-card (--buendig, #777): Flaeche, Rand, Radius
   und das Abschneiden an der Rundung kommen aus card.css. Hier bleiben die
   Schrift (siehe oben) und der Kopf, so wie er am Dashboard gemessen war.
   ⚠️ Drei Klassen tief: `.tc-card--buendig > .tc-card__header` setzt ein
   eigenes Polster, und welche Datei spaeter laedt, ist je Seite verschieden. */
.rl-card.tc-card {
  color: var(--tc-text-strong);
  line-height: 1.6;
}

.rl-card.tc-card > .rl-card-kopf {
  gap: 12px;
  padding: 20px 20px 15px;
  background: var(--bg-card-header);
  border-bottom-color: rgba(var(--tc-highlight-rgb), 0.2);
}

.rl-card-kopf .tc-card__title {
  font-size: 1.1rem;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .rl-card.tc-card > .rl-card-kopf {
    flex-wrap: wrap;
    gap: 10px;
  }

  .rl-card-kopf .tc-card__title {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .rl-card-kopf .tc-card__title {
    font-size: 1.1rem;
  }
}

@media print {
  .rl-card {
    break-inside: avoid;
  }
}

.no-data {
  padding: 30px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

.leader-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
}

.leader-rank {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blood);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
}

.leader-rank.gold { background: var(--color-gold); color: #000; }
.leader-rank.silver { background: #aaa; color: #000; }
.leader-rank.bronze { background: #cd7f32; }

.leader-info { flex: 1; }
.leader-name { font-weight: 600; color: var(--text-primary); }
.leader-sub { font-size: 0.8rem; color: var(--text-muted); }
.leader-value { font-weight: 700; color: var(--color-gold); }

.leader-row.is-mine {
  background: rgba(212, 175, 55, 0.08);
  border-left: 3px solid var(--color-gold);
}

/* ================================================================
   KLICKBARE WARBAND-NAMEN (überall im Dashboard)
   ================================================================ */
.clickable-warband {
  cursor: pointer;
  transition: color 0.2s, text-decoration 0.2s;
  border-bottom: 1px dotted transparent;
}

.clickable-warband:hover {
  color: var(--color-gold, #d4af37) !important;
  border-bottom-color: var(--color-gold, #d4af37);
}

/* ================================================================
   FLAVOR TEXT (für leere Listen)
   ================================================================ */
.no-data-flavor {
  padding: 30px 20px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ================================================================
   RANGLISTEN CARD — Nav + Content
   Den Rahmen stellt rl-card oben in dieser Datei.
   ================================================================ */

.rl-close-btn {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--color-gold, #c9a959);
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(201, 169, 89, 0.15);
  background: rgba(201, 169, 89, 0.04);
  transition: all 0.15s;
  display: none;
}

.rl-close-btn:hover {
  color: var(--color-gold);
  border-color: rgba(201, 169, 89, 0.3);
  background: rgba(201, 169, 89, 0.1);
}

/* Layout: Nav left + Content right */
.rl-layout {
  display: grid;
  /* 220 statt 200 (20.08.2026): Die Navigation hat seitlich 20px Innenabstand
     bekommen, damit sie mit dem Kartenkopf fluchtet — ohne die zwanzig Pixel
     mehr Spaltenbreite waere derselbe Eintragstext danach schmaler gewesen
     und „3155 Pkt · Timmay (66)" noch frueher abgeschnitten. */
  grid-template-columns: 220px 1fr;
}

.rl-layout--open {
  grid-template-columns: 220px 1fr;
}

/* Navigation */
/* ⚠️ DER OBERE INNENABSTAND MUSS DEM VON `.rl-content` ENTSPRECHEN
   (20.08.2026, Tim: „Hier stimmen Abstände und Ausrichtungen noch nicht.").
   Hier stand 10px gegen 20px drueben — die Navigation begann also zwanzig
   Pixel ueber dem Kasten daneben, und seitlich waren es 8px gegen 24px. In
   einer Karte mit sichtbarem Trennstrich faellt beides sofort auf: Die
   Trennlinie macht aus den zwei Spalten ein Paar, und ein Paar liest man
   gegeneinander. */
.rl-nav {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  /* Seitlich wie der Kartenkopf darueber (20px) — er steht direkt ueber
     dieser Spalte, und drei verschiedene Abstaende zum selben Kartenrand
     (Kopf 20, Navigation 13, Kasten 25) waren genau die Unruhe, die Tim
     gemeldet hat. Die Spalte wird dafuer breiter, sonst verliert der
     Eintragstext die Breite, die das Padding gewinnt. */
  padding: 20px;
}

.rl-nav-cat {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 12px 4px;
  font-weight: 600;
}

.rl-nav-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin: 10px 12px;
}

.rl-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 2px;
  background: rgba(255, 255, 255, 0.015);
}

.rl-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

.rl-nav-item--active {
  background: rgba(201, 169, 89, 0.08);
  border-color: rgba(201, 169, 89, 0.2);
  transform: translateX(0);
}

.rl-nav-item-icon {
  font-size: 1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.rl-nav-item-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.2;
}

.rl-nav-item:hover .rl-nav-item-label {
  color: var(--text-primary);
}

.rl-nav-item--active .rl-nav-item-label {
  color: var(--color-gold);
}

/* ⚠️ WERT UND NAME STEHEN UNTEREINANDER (20.08.2026, Tim: „Nimm das mit.").
   Vorher standen sie in EINER Zeile mit einem Trennpunkt dazwischen — in einer
   220px-Spalte mit Icon und Chevron blieben davon rund 110px, und der Name war
   praktisch immer abgeschnitten („3170 Pkt · Timmay (6…"). Zwei Zeilen kosten
   13px Hoehe je Eintrag und zeigen dafuer beides ganz. */
.rl-nav-item-val {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-nav-item-wer {
  font-size: 0.66rem;
  line-height: 1.25;
  color: var(--text-muted);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-nav-item--active .rl-nav-item-wer { opacity: 1; }

.rl-nav-item--active .rl-nav-item-val {
  color: var(--color-gold-dark, rgba(201, 169, 89, 0.6));
}

/* Chevron indicator */
.rl-nav-chevron {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  transition: all 0.15s;
  margin-left: auto;
  line-height: 1;
}

.rl-nav-item:hover .rl-nav-chevron {
  color: rgba(255, 255, 255, 0.4);
  transform: translateX(2px);
}

.rl-nav-item--active .rl-nav-chevron {
  color: var(--color-gold);
  transform: translateX(2px);
}

/* Content area */
.rl-content {
  /* Rundum wie `.rl-nav` und der Kartenkopf. Der Kasten darin bringt seinen
     eigenen unteren Abstand schon mit. */
  padding: 20px;
  display: block;
}

.rl-layout--open .rl-content {
  /* always visible now */
}

.rl-content-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-variant: small-caps;
  color: var(--color-gold);
  font-size: 1.15rem;
  letter-spacing: 1px;
  margin-bottom: 3px;
}

.rl-content-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.rl-content-stats {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rl-content-stats b {
  color: var(--color-gold);
  font-weight: 600;
}

/* Podium rows */
.rl-pod-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.rl-pod-row:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
  transform: translateX(3px);
}

.rl-pod-row--1 {
  border-color: rgba(201, 169, 89, 0.3);
  background: rgba(201, 169, 89, 0.06);
  padding: 14px 16px;
}

.rl-pod-row--1:hover {
  border-color: rgba(201, 169, 89, 0.5);
  background: rgba(201, 169, 89, 0.1);
}

.rl-pod-row--2 {
  border-color: rgba(192, 192, 192, 0.15);
  background: rgba(192, 192, 192, 0.02);
}

.rl-pod-row--2:hover {
  border-color: rgba(192, 192, 192, 0.3);
}

.rl-pod-row--3 {
  border-color: rgba(205, 127, 50, 0.15);
  background: rgba(205, 127, 50, 0.02);
}

.rl-pod-row--3:hover {
  border-color: rgba(205, 127, 50, 0.3);
}

.rl-pod-medal {
  font-size: 1.2rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

/* Das Gesicht der ersten drei (#322, 22.09.2026). 40 px, weil der Schmuck vom
   Schwarzmarkt darum herum liegt und bei 28 px zur Verzierung schrumpft; die
   Zeile ist mit 12 px Abstand breit genug dafuer. Bei Platz 1 etwas groesser,
   wie die Medaille daneben.

   ⚠️ IMMER MIT DER ZEILE DAVOR (0,2,0). `.rl-gesicht` allein (0,1,0) verliert
   gegen `.tc-avatar` aus atoms-extra.css, das auf dem Dashboard SPAETER laedt
   und 40px setzt — gemessen: Platz 2 und 3 blieben bei 40, waehrend Platz 1
   (schon 0,2,0) korrekt schrumpfte. „Wer laedt zuletzt?" ist keine Eigenschaft
   des Projekts, sondern jeder Seite (CLAUDE.md §7k). */
.rl-pod-row .rl-gesicht {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.rl-pod-row--1 .rl-gesicht { width: 46px; height: 46px; }

@media (max-width: 420px) {
  .rl-pod-row .rl-gesicht { width: 34px; height: 34px; }
  .rl-pod-row--1 .rl-gesicht { width: 38px; height: 38px; }
}

.rl-pod-row--1 .rl-pod-medal {
  font-size: 1.5rem;
}

.rl-pod-info {
  min-width: 0;
  flex: 1;
}

.rl-pod-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-pod-row--1 .rl-pod-name {
  color: var(--color-gold);
  font-size: 1rem;
}

.rl-pod-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-pod-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

.rl-pod-row--1 .rl-pod-val {
  color: var(--color-gold);
  font-size: 1.05rem;
}

.rl-pod-row--2 .rl-pod-val {
  color: rgba(210, 210, 210, 0.7);
}

.rl-pod-row--3 .rl-pod-val {
  color: rgba(205, 155, 80, 0.7);
}

/* Rest list */
.rl-rest-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin: 14px 0 8px;
}

.rl-rest-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}

.rl-rest-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  align-items: center;
  cursor: pointer;
  transition: background 0.12s;
  margin-bottom: 2px;
}

.rl-rest-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.rl-rest-row--mine {
  background: rgba(201, 169, 89, 0.05);
  border: 1px solid rgba(201, 169, 89, 0.15);
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
}

.rl-rest-rank {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
}

.rl-rest-row--mine .rl-rest-rank {
  color: var(--color-gold-dark, rgba(201, 169, 89, 0.6));
}

.rl-rest-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}

.rl-rest-row--mine .rl-rest-name {
  color: var(--color-gold);
}

.rl-rest-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.rl-rest-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: right;
}

.rl-rest-row--mine .rl-rest-val {
  color: var(--color-gold);
}

/* Town Cryer Spotlight (Null-State Carousel) */
/* ============================================================================
 * SPOTLIGHT - DASHBOARD-ONLY (Taskwerk #184, geprueft 11.08.2026)
 * ----------------------------------------------------------------------------
 * tc-spot-* traegt das tc-Praefix, ist aber KEIN allgemeiner Baustein: einziger
 * Konsument ist js/ui/dashboard-core.js (22 Verwendungen), und in keiner
 * library-*.html kommt die Familie vor. Richtig platziert - sie steht hier in
 * dashboard.css und nicht im Komponenten-Bundle.
 * ============================================================================ */
.tc-spot-wrap {
  position: relative;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(201, 169, 89, 0.1);
  overflow: hidden;
  min-height: 210px;
}

.tc-spot-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* ⚠️ `justify-content: center` zentriert im INNENRAUM, nicht im Kasten.
     Bei 32px oben gegen 12px unten sass der Inhalt sichtbar zu tief — die
     Zentrierung sah aus, als waere sie keine. Oben etwas mehr bleibt richtig:
     Dort sitzt der Pause-Knopf, und der Text soll nicht darunter kleben. */
  padding: 26px 24px 14px;
  cursor: pointer;
  min-height: 180px;
}

.tc-spot-stage:hover {
  background: rgba(201, 169, 89, 0.03);
}

.tc-spot-pause {
  position: absolute;
  /* Auf einer Linie mit dem Innenabstand der Buehne (26px oben, 24px
     seitlich) statt auf eigenen 10px — sonst schwebt der Knopf naeher am
     Rand als alles andere im Kasten.
     ⚠️ #606 (09.09.2026): Der Knopf mass 30x23px. Jetzt --tc-touch-min in
     BEIDEN Richtungen (Heuristik 5); top/right so nachgezogen, dass die
     Mitte des Knopfes bleibt, wo sie war (vorher 12+23/2, jetzt 6+36/2). */
  top: 6px;
  right: 8px;
  min-width: var(--tc-touch-min, 36px);
  min-height: var(--tc-touch-min, 36px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: none;
  transition: all 0.15s;
  z-index: 2;
  line-height: 1.2;
}

.tc-spot-pause:hover {
  border-color: rgba(201, 169, 89, 0.3);
  color: var(--color-gold);
}

/* Category label */
.tc-spot-cat {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.68rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Icon */
.tc-spot-icon {
  font-size: 1.6rem;
  margin-bottom: 8px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Champion name */
.tc-spot-name {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

/* Value (the big number/stat) */
.tc-spot-val {
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(250, 199, 117, 0.9);
  letter-spacing: 0.5px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease 0.25s, transform 0.4s ease 0.25s;
}

/* Subtitle */
.tc-spot-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.4s ease 0.35s;
}

/* Animate-in state for all spotlight elements */
.tc-spot--on {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Navigation dots
   ⚠️ #606 (09.09.2026): Der Punkt WAR das Klickziel — 6x6px, und damit das
   kleinste Bedienelement der ganzen Plattform, ausgerechnet an der Stelle,
   mit der man zwischen den Ausrufer-Meldungen springt. Jetzt ist das Element
   die Trefferflaeche (--tc-touch-min in beiden Richtungen) und der sichtbare
   Punkt ein ::before darin. Das Bild bleibt: 6px Punkt, 20px Strich im
   aktiven Zustand; nur der Abstand der Punkte waechst von 12 auf 36px
   Mitte zu Mitte — der `gap` faellt weg, die Flaeche ist der Abstand. */
.tc-spot-dots {
  display: flex;
  gap: 0;
  justify-content: center;
  padding: 0 0 4px;
}

.tc-spot-dot {
  min-width: var(--tc-touch-min, 36px);
  min-height: var(--tc-touch-min, 36px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tc-spot-dot::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s;
}

.tc-spot-dot:hover::before {
  background: rgba(201, 169, 89, 0.4);
}

.tc-spot-dot--on::before {
  background: var(--color-gold, #c9a959);
  width: 20px;
  border-radius: 3px;
}

/* Hint text */
.tc-spot-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  opacity: 0.5;
  padding-bottom: 12px;
}

/* Progress line (timer indicator) */
.tc-spot-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 89, 0.6), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: none;
}

.tc-spot-line--on {
  transform: scaleX(1);
  transition: transform 4.5s linear;
}

/* ================================================================
   RANGLISTEN DETAIL EXPAND
   ================================================================ */

.rl-detail-box {
  border-left: 2px solid var(--color-gold, #c9a959);
  margin: 0 6px 8px;
  padding: 0 14px;
  background: rgba(201, 169, 89, 0.03);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
}

.rl-detail-box--open {
  max-height: 300px;
  opacity: 1;
  padding: 12px 14px;
}

.rl-detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.rl-detail-formula {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.72rem;
  color: var(--text-secondary, #bbb);
  line-height: 1.6;
  margin-bottom: 10px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.rl-detail-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.rl-detail-wb-link {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #bbb);
  transition: all 0.15s;
}

.rl-detail-wb-link:hover {
  border-color: rgba(201, 169, 89, 0.3);
  color: var(--color-gold, #c9a959);
  background: rgba(201, 169, 89, 0.06);
}

/* Row expanded state */
.rl-pod-row--expanded {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}

.rl-rest-row--expanded {
  background: rgba(201, 169, 89, 0.04);
  border-radius: 6px 6px 0 0;
}

/* ================================================================
   RESPONSIVE: Ranglisten
   ================================================================ */

@media (max-width: 900px) {
  /* minmax(0, 1fr), nicht 1fr (#374, 13.09.2026): `1fr` schrumpft nicht unter
     den Inhalt (CLAUDE.md §10). Gemessen bei 375px: Die Spalte wuchs je Reiter
     auf 418 bis 910px, und der Rahmen (overflow: hidden) schnitt die Werte
     rechts ab — auf dem Dashboard seit jeher, im Hub traf es die Hauptansicht.
     Die Kinder brauchen dazu min-width: 0, sonst haelt ihr Inhalt die Spalte. */
  .rl-layout,
  .rl-layout--open {
    grid-template-columns: minmax(0, 1fr);
  }

  .rl-layout > .rl-nav,
  .rl-layout > .rl-content {
    min-width: 0;
  }

  .rl-nav {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px;
  }

  .rl-nav-cat,
  .rl-nav-sep {
    display: none;
  }

  .rl-nav-item {
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    padding: 6px 10px;
    background: none;
    border-color: transparent;
  }

  .rl-nav-item:hover {
    transform: none;
  }

  .rl-nav-item--active {
    border-bottom-color: var(--color-gold);
    border-color: transparent;
    border-bottom-color: var(--color-gold);
    background: none;
  }

  .rl-nav-item-val,
  .rl-nav-chevron {
    display: none;
  }

  .rl-content {
    padding: 14px;
  }

  .tc-spot-stage {
    padding: 24px 16px 8px;
    min-height: 160px;
  }

  .tc-spot-name {
    font-size: 1.05rem;
  }

  .tc-spot-val {
    font-size: 1.3rem;
  }

  .tc-spot-hint {
    display: none;
  }

  .rl-detail-box--open {
    padding: 10px 12px;
  }

  .rl-detail-formula {
    font-size: 0.68rem;
  }
}

/* ================================================================
   DIE DASHBOARD-WERTUNGEN (#373, 16.09.2026)
   ================================================================ */

/* Der Zeitraum-Umschalter steht im Kopf zwischen Titel und Spotlight-Knopf.
   Er bringt die Pill-Reiter der Library mit (tabs.css); hier steht nur, wo
   er sitzt. */
.rl-card-kopf .rl-zeitraum {
  margin-left: auto;
}
.rl-card-kopf .rl-zeitraum ~ .rl-close-btn {
  margin-left: 0;
}

/* Die eigene Zeile auf dem Podest. Die Restliste hat dafuer seit jeher
   `rl-rest-row--mine`; auf dem Podest fehlte das Gegenstueck, weil dort nie
   eine Spieler-Rangliste stand. Ein Balken statt einer Flaeche: Die Flaeche
   traegt schon die Medaillenfarbe. */
.rl-pod-row--mine {
  box-shadow: inset 3px 0 0 var(--tc-highlight);
}

/* Leer in dieser Ansicht — mit dem Weg zur anderen, wenn es sie gibt. */

/* Die Navigation mit Gruppen steht als Kachelraster UEBER dem Inhalt, der
   Inhalt bekommt die volle Breite (siehe _rlRegelStand in ranglisten.js).
   Der Hub hat keine Gruppen und behaelt die Spalte links. */
.rl-layout--gruppen,
.rl-layout--gruppen.rl-layout--open {
  grid-template-columns: minmax(0, 1fr);
}
.rl-layout--gruppen > .rl-nav {
  min-width: 0;
  border-right: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--tc-space-3, 12px) 20px var(--tc-space-4, 16px);
}
.rl-nav--gruppen .rl-nav-cat {
  padding: var(--tc-space-3, 12px) 2px var(--tc-space-1, 4px);
}
.rl-nav--gruppen .rl-nav-cat:first-child {
  padding-top: 0;
}
.rl-nav-gruppe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.rl-nav-gruppe .rl-nav-item {
  min-width: 0;
  margin-bottom: 0;
}
.rl-nav-gruppe .rl-nav-item:hover {
  transform: none;
}
.rl-nav-gruppe .rl-nav-chevron {
  display: none;
}

@media (max-width: 900px) {
  /* Auf dem Handy waren die Kategorien ausgeblendet und die Wertungen
     umbrechende Reiter. Bei siebzehn Wertungen in fuenf Gruppen waeren das
     Zeilen ohne jede Ordnung — die Gruppennamen bleiben stehen, darunter
     zwei Kacheln je Zeile mit dem Wert der Spitze. */
  .rl-nav--gruppen {
    display: block;
    padding: var(--tc-space-2, 8px) var(--tc-space-3, 12px) var(--tc-space-3, 12px);
  }
  .rl-nav--gruppen .rl-nav-cat {
    display: block;
    padding: var(--tc-space-2, 8px) 2px 2px;
  }
  .rl-nav-gruppe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .rl-nav-gruppe .rl-nav-item {
    min-height: var(--tc-touch-min, 36px);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.015);
  }
  .rl-nav-gruppe .rl-nav-item--active {
    border-color: rgba(201, 169, 89, 0.3);
    background: rgba(201, 169, 89, 0.08);
  }
  .rl-nav-gruppe .rl-nav-item-val {
    display: block;
  }
  .rl-card-kopf .rl-zeitraum {
    margin-left: 0;
    flex-basis: 100%;
    order: 3;
  }
}

/* ============================================================================
 * DIE WERTUNGSTABELLE AUF DEM DASHBOARD (#1003, 08.10.2026)
 * ----------------------------------------------------------------------------
 * Tims Wahl in der Use-Case-Analyse: „Wer führt“ stand dreimal da (Podium,
 * Kategorie-Raster, Karussell), der eigene Platz fast nirgends. Jetzt eine
 * Tabelle aus tc-tabelle (tabelle.css): je Wertung wer vorn liegt und wo du
 * stehst, mit dem Abstand zum Nächsten. Gruppenzeilen ordnen nach
 * RanglistenRegeln.GRUPPEN. Ein Tipp auf die Wertung öffnet die ganze Liste
 * (dieselbe Darstellung wie im Mordheim-Hub). Library: library-ranglisten.html.
 * ========================================================================== */
.rl-tabelle-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-2);
  margin-bottom: var(--tc-space-3);
}
.rl-tabelle .rl-tabelle__gruppe th {
  padding-top: var(--tc-space-3);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xs);
  letter-spacing: var(--tc-tracking-wide);
  color: var(--tc-text-muted);
  background: transparent;
}
.rl-tabelle td { vertical-align: middle; }
.rl-tabelle__wertung {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--tc-weight-semibold);
  color: var(--tc-text-strong);
  text-align: left;
  cursor: pointer;
}
.rl-tabelle__wertung:hover { color: var(--tc-highlight); }
.rl-tabelle__wertung:focus-visible { outline: 2px solid var(--tc-highlight); outline-offset: 2px; border-radius: var(--tc-radius-sm); }
.rl-tabelle__vorn { display: flex; align-items: center; gap: var(--tc-space-2); min-width: 0; }
.rl-tabelle__vorn .rl-gesicht { width: 26px; height: 26px; flex: none; }
.rl-tabelle__name { overflow-wrap: anywhere; }
.rl-tabelle__wert { color: var(--tc-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl-tabelle__du { font-variant-numeric: tabular-nums; }
.rl-tabelle__abstand { display: block; font-size: var(--tc-text-xs); color: var(--tc-text-muted); }
.rl-tabelle tr.ist-vorn .rl-tabelle__du { color: var(--tc-highlight); font-weight: var(--tc-weight-semibold); }
@media (max-width: 600px) {
  .rl-tabelle .rl-tabelle__wert { display: block; }
}