/* ============================================================================
 * tc-kasse — Dein Konto bei Gorbo (18.09.2026, #732)
 * ----------------------------------------------------------------------------
 * Renderer: js/ui/wirtsliste.js (TC.Wirtsliste.kasse)
 * Demonstriert in: library-community.html#wirtsliste
 *
 * Der Kontostand als Knopf in Gorbos Haus: Gesicht, Betrag, und daneben,
 * wohin er fuehrt. Mindestens 44 px hoch.
 *
 * ⚠️ WARUM EIN KNOPF UND KEIN ANZEIGEFELD. Mit #732 faellt Gorbos Tuer aus
 * der Wand (Tim am 17.09.2026: „Gorbo empfaengt am Eingang, seine Tuer faellt
 * aus der Wand"). Die Kasse war bis dahin ein reines Anzeigefeld ohne Link —
 * ohne Tresor-Tuer waere sein Hauptbuch damit nur noch ueber eine getippte
 * Adresse zu erreichen gewesen. Live am 17.09.2026: 6 von 21 hatten den
 * Tresor seit dem 19.08. ueberhaupt geoeffnet.
 *
 * ⚠️ AUCH SIE STAND ZWEIMAL: `.ug-kasse` in css/untergrund.css (Gasse und
 * jeder Raum) und `.dash-untergrund__kasse` in css/dashboard-page.css
 * (Dashboard und die vier Hubs), mit verschiedener Groesse und verschiedener
 * Beschriftung („Schattengold" gegen „Schattengold auf der Hand").
 *
 * Varianten:
 *   --klebt  bleibt oben stehen, wenn man scrollt (Gasse und Raeume): Im
 *            Untergrund ist jede Entscheidung eine Geldentscheidung, und wer
 *            nicht weiss, was er hat, klickt nicht.
 *   --gross  der Betrag als Hauptzahl einer Kachel (Dashboard, Hubs).
 *
 * Struktur:
 *   <a class="tc-kasse [--klebt|--gross]" href="untergrund.html?target=tresor">
 *     <img class="tc-kasse__gesicht" alt="">
 *     <span class="tc-kasse__stand">
 *       <span class="tc-kasse__wert">1.234</span>
 *       <span class="tc-kasse__einheit">Schattengold</span>
 *     </span>
 *     <span class="tc-kasse__weg">Dein Konto bei Gorbo</span>
 *   </a>
 * ========================================================================== */

.tc-kasse {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  min-height: 44px;
  padding: var(--tc-space-2) var(--tc-space-3);
  border: 1px solid var(--tc-deco-warm-border);
  border-radius: var(--tc-radius-md);
  background: var(--tc-bg-surface-2);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--tc-motion-normal),
              background var(--tc-motion-normal);
}

.tc-kasse:hover,
.tc-kasse:focus-visible {
  border-color: rgba(var(--tc-accent-rgb), 0.6);
  background: rgba(var(--tc-accent-rgb), 0.12);
  outline: none;
}

.tc-kasse:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--tc-accent-rgb), 0.55);
}

.tc-kasse__gesicht {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  border: 1px solid rgba(var(--tc-accent-rgb), 0.55);
  background: var(--tc-bg-base);
}

.tc-kasse__stand {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tc-kasse__wert {
  font-family: var(--tc-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tc-highlight);
  font-variant-numeric: tabular-nums;
}

.tc-kasse__einheit {
  margin-top: 2px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}

/* Wohin der Knopf fuehrt, als Wort und nicht nur als Pfeil: Ein Betrag mit
   Pfeil daneben liest sich wie eine Anzeige. Bricht am schmalen Telefon
   lieber um, als den Betrag zu verdraengen. */
.tc-kasse__weg {
  margin-left: auto;
  min-width: 0;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tc-deco-warm-text);
}

.tc-kasse__weg::after {
  content: '\00A0\2192';
}

/* Klebt UNTER der Navigationsleiste, nicht am Fensterrand: #tc-nav ist selbst
   sticky (nav.css) und liegt darueber. Mit `top: 0` verschwand die Kasse beim
   Scrollen genau unter der Leiste (#733, am Pruefstand bei 375 px gemessen).
   Dieselbe Rechnung wie die Leistenhoehe in nav.css. */
.tc-kasse--klebt {
  position: sticky;
  top: calc(56px + var(--tc-safe-top, 0px));
  z-index: var(--tc-z-base);
  background: color-mix(in srgb, var(--tc-bg-surface-2) 96%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--tc-shadow-md);
}

.tc-kasse--gross .tc-kasse__gesicht { width: 44px; height: 44px; }
.tc-kasse--gross .tc-kasse__wert { font-size: 1.7rem; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .tc-kasse { transition: none; }
}