/* ============================================================================
 * tc-titelwahl — zwei Wörter, ein Titel (#756, 19.09.2026)
 * ----------------------------------------------------------------------------
 * Gezeichnet von TC.Titelwahl (js/ui/titelwahl.js), demonstriert in
 * library-community.html#titelwahl, benutzt im Raum der Contessa.
 *
 * Aufbau: ein Kopf mit dem Titel, wie er getragen wird; zwei Töpfe
 * (Beiwort, Hauptwort) als tc-choice, je ein Radio; darunter zugeklappt,
 * was noch zu holen ist, und die Wörter, die die Contessa verkauft.
 *
 * ⚠️ DIE TÖPFE SIND FIELDSETS, DAS RASTER SITZT DARUM, NICHT DARIN. Ein
 * <fieldset> mit display: grid legt seine <legend> als Zelle daneben
 * (CLAUDE.md, Skarns Ratten). Die Wörter fließen in einem eigenen div.
 *
 * ⚠️ DIE SPALTEN FRAGEN DEN CONTAINER, nicht den Bildschirm: Im Raum der
 * Contessa steht die Titelwahl in voller Breite, in der Library in einer
 * Demo-Bühne. Ein Container kann sich nicht selbst abfragen (§10) — deshalb
 * ist .tc-titelwahl der Container und __toepfe das, was umschaltet.
 * ========================================================================== */

.tc-titelwahl {
  container: titelwahl / inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-4);
  font-family: var(--tc-font-body);
  color: var(--tc-text-default);
}

/* --- Der Titel, wie er getragen wird ------------------------------------- */
.tc-titelwahl__kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tc-space-1);
  padding: var(--tc-space-4) var(--tc-space-3);
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-lg);
  text-align: center;
}
.tc-titelwahl__traeger {
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
}
.tc-titelwahl__titel {
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xl);
  line-height: var(--tc-leading-tight);
  color: var(--tc-highlight);
  overflow-wrap: anywhere;
}
.tc-titelwahl__leer {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-base);
  font-style: italic;
  color: var(--tc-text-muted);
}
.tc-titelwahl__zahl,
.tc-titelwahl__stand {
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}
.tc-titelwahl__stand:empty { display: none; }

/* Ein kurzes Aufglühen, wenn sich der Titel ändert (Heuristik 4). */
.tc-titelwahl__titel.is-neu {
  animation: tc-titelwahl-gluehen var(--tc-duration-slow, 400ms) ease-out;
}
@keyframes tc-titelwahl-gluehen {
  0%   { text-shadow: 0 0 0 transparent; }
  35%  { text-shadow: 0 0 14px var(--tc-highlight-glow); }
  100% { text-shadow: 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-titelwahl__titel.is-neu {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    animation-delay: -1ms;
  }
}

/* --- Die zwei Töpfe ---------------------------------------------------------- */
.tc-titelwahl__toepfe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tc-space-4);
}
@container titelwahl (min-width: 560px) {
  .tc-titelwahl__toepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tc-titelwahl__topf {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.tc-titelwahl__legende {
  padding: 0;
  margin-bottom: var(--tc-space-2);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-sm);
  color: var(--tc-text-strong);
}
.tc-titelwahl__anzahl {
  margin-left: var(--tc-space-1);
  font-family: var(--tc-font-body);
  font-weight: var(--tc-weight-normal);
  color: var(--tc-text-muted);
}
/* Wer zwei Dutzend Wörter hat, soll nicht an ihnen vorbeiscrollen müssen,
   um zum zweiten Topf zu kommen. */
.tc-titelwahl__woerter {
  max-height: 17rem;
  overflow-y: auto;
  align-content: flex-start;
  padding: 2px;
  overscroll-behavior: contain;
}
.tc-titelwahl__hinweis {
  margin: 0;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
}
.tc-titelwahl__hinweis[hidden] { display: none; }

/* --- Noch zu holen und der Laden ----------------------------------------- */
.tc-titelwahl__offen,
.tc-titelwahl__laden {
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-subtle);
  border-radius: var(--tc-radius-md);
}
.tc-titelwahl__laden { padding: 0 var(--tc-space-3) var(--tc-space-3); }
.tc-titelwahl__summary {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  min-height: var(--tc-touch-min);
  padding: var(--tc-space-2) var(--tc-space-3);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-sm);
  color: var(--tc-text-strong);
  cursor: pointer;
}
.tc-titelwahl__gruppe { padding: 0 var(--tc-space-3) var(--tc-space-3); }
.tc-titelwahl__stufe {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--tc-space-3) 0 var(--tc-space-2);
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-semibold);
  color: var(--tc-text-strong);
}
.tc-titelwahl__stufe span {
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-normal);
  color: var(--tc-text-muted);
}
.tc-titelwahl__liste {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-titelwahl__paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--tc-space-3);
  row-gap: 2px;
  padding: var(--tc-space-2) var(--tc-space-3);
  background: var(--tc-bg-surface-2);
  border-radius: var(--tc-radius-sm);
}
.tc-titelwahl__paar-titel {
  grid-column: 1;
  font-family: var(--tc-font-display);
  color: var(--tc-text-default);
  overflow-wrap: anywhere;
}
.tc-titelwahl__paar-titel .tc-badge { vertical-align: middle; }
.tc-titelwahl__wie {
  grid-column: 1;
  font-size: var(--tc-text-xs);
  line-height: var(--tc-leading-snug);
  color: var(--tc-text-muted);
}
.tc-titelwahl__paar > .tc-button,
.tc-titelwahl__knoepfe,
.tc-titelwahl__status {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.tc-titelwahl__status {
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
  text-align: right;
}
.tc-titelwahl__paar.is-verborgen .tc-titelwahl__paar-titel {
  letter-spacing: 0.3em;
  color: var(--tc-text-muted);
}
.tc-titelwahl__paar.is-vergeben .tc-titelwahl__paar-titel { color: var(--tc-text-muted); }
.tc-titelwahl__ware.is-besitz .tc-titelwahl__paar-titel { color: var(--tc-highlight); }

/* ----------------------------------------------------------------------------
 * Seit dem 24.09.2026: Leumund · Gestalt, Beiname, Anprobe, Reiter-Teile.
 * ------------------------------------------------------------------------- */
.tc-titelwahl__wiehaelfte {
  display: block;
  margin-top: 2px;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-normal);
  color: var(--tc-text-muted);
}
.tc-titelwahl__beiname {
  font-size: var(--tc-text-sm);
  font-style: italic;
  color: var(--tc-text-muted);
}
.tc-titelwahl__beiname:empty { display: none; }
/* In der Anprobe hat die Wahl den ganzen Reiter — kein Scroll-Kasten im
   Scroll, der am Handy den Daumen fängt. */
.tc-titelwahl--anprobe .tc-titelwahl__woerter { max-height: none; overflow: visible; }

.tc-titelwahl__anprobe {
  position: sticky;
  top: var(--tc-titelwahl-klebt, var(--tc-space-2));
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--tc-space-3);
  background: var(--tc-bg-surface-2);
  border: 1px solid var(--tc-accent);
  border-radius: var(--tc-radius-md);
  text-align: center;
}
.tc-titelwahl__anprobe[hidden] { display: none; }
.tc-titelwahl__anprobe-was {
  font-size: var(--tc-text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}
.tc-titelwahl__anprobe-vorher {
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}
.tc-titelwahl__anprobe .tc-titelwahl__titel.is-neu {
  animation: tc-titelwahl-gluehen var(--tc-duration-slow, 400ms) ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .tc-titelwahl__anprobe .tc-titelwahl__titel.is-neu { animation-duration: 0.01ms; animation-iteration-count: 1; animation-delay: -1ms; }
}
.tc-titelwahl--laden,
.tc-titelwahl--buch { gap: var(--tc-space-3); }
/* Anprobieren und Preis nebeneinander in der rechten Spalte; am schmalen
   Laden untereinander, damit der Wortname nicht auf eine Silbe schrumpft. */
.tc-titelwahl__knoepfe { display: flex; gap: var(--tc-space-2); align-items: center; }
@container titelwahl (max-width: 420px) {
  .tc-titelwahl__knoepfe { flex-direction: column; align-items: stretch; }
}

/* ----------------------------------------------------------------------------
 * Seit dem 25.09.2026: Chips statt Wand (Tim: „Optimiere optisch den Bereich
 * von der Contessa").
 * ------------------------------------------------------------------------- */
/* tc-choice lässt jede Option wachsen (flex: 1 1 auto) und macht sie 44 px
   hoch — für drei große Wahlkacheln richtig, für hundert Wörter eine Wand:
   Jede Reihe lief bis an den Rand, und das Auge fand keine Wörter, nur
   Kästen. Hier stehen die Wörter in ihrer eigenen Breite, als Pillen.
   ⚠️ 36 px sind die Untergrenze aus Heuristik 5, auch am Finger — die
   Regel schlägt die 44 px aus der pointer-coarse-Regel in form.css bewusst
   (0,2,0 gegen 0,1,0). Die Wörter stehen dicht; mehr Höhe hieße bei 53
   Wörtern zwei Bildschirme mehr. */
.tc-titelwahl__woerter.tc-choice { gap: 6px; }
.tc-titelwahl__woerter .tc-choice__option {
  flex: 0 0 auto;
  min-height: var(--tc-touch-min, 36px);
  padding: 4px 12px;
  gap: 6px;
  border-radius: var(--tc-radius-full, 999px);
  font-weight: var(--tc-weight-normal);
}
.tc-titelwahl__woerter .tc-choice__option:has(.tc-choice__input:checked) {
  font-weight: var(--tc-weight-semibold);
}
/* Die leere Wahl steht vorn und sieht nicht aus wie ein Wort. */
.tc-titelwahl__woerter .tc-titelwahl__keins {
  border-style: dashed;
  background: transparent;
  color: var(--tc-text-muted);
  font-style: italic;
}
.tc-titelwahl__woerter .tc-titelwahl__keins:has(.tc-choice__input:checked) {
  color: var(--tc-text-strong);
}

/* Im Laden: Was man kaufen kann, steht hell; was man hat, golden (oben). */
.tc-titelwahl__ware .tc-titelwahl__paar-titel { color: var(--tc-text-strong); }

/* Titelbuch: Künftige Jahreszeiten zugeklappt, derselbe Kopf wie „Noch zu
   holen", nur eine Stufe leiser. */
.tc-titelwahl__spaeter {
  margin-top: var(--tc-space-2);
  border: 1px dashed var(--tc-border-default);
  border-radius: var(--tc-radius-sm);
}
.tc-titelwahl__spaeter > .tc-titelwahl__summary {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}
.tc-titelwahl__spaeter > .tc-titelwahl__liste { padding: 0 var(--tc-space-2) var(--tc-space-2); }
/* Ein zugeklappter Kopf ohne Zeichen sieht aus wie eine Zeile Text — der
   Winkel sagt, dass dahinter etwas liegt. */
.tc-titelwahl__spaeter > .tc-titelwahl__summary { list-style: none; }
.tc-titelwahl__spaeter > .tc-titelwahl__summary::-webkit-details-marker { display: none; }
.tc-titelwahl__spaeter > .tc-titelwahl__summary::after {
  content: '\25BE';
  margin-left: auto;
  transition: transform var(--tc-motion-fast);
}
.tc-titelwahl__spaeter:not([open]) > .tc-titelwahl__summary::after { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) {
  .tc-titelwahl__spaeter > .tc-titelwahl__summary::after { transition: none; }
}