/* ============================================================================
 * COMPONENT · tc-form-group + Form-Inputs
 * ----------------------------------------------------------------------------
 * Form-Komponenten-Familie. Loest .pf-input/.pf-select/.pf-textarea,
 * .form-input und die unzaehligen Inline-Style-Form-Felder ab.
 *
 * Konsistent:
 *   - Mindest-Hoehe 38px (44px auf Touch)
 *   - Focus-State mit Accent-Glow
 *   - Error-State (.is-error)
 *   - Disabled-State
 *   - Hover-State auf Non-Touch
 *
 * Version: 1.0 (29. Mai 2026, Phase 2 Tranche 2)
 * ============================================================================ */


/* ============================================================================
 * tc-form-group — Container (Label + Input + Help/Error)
 * ============================================================================ */
.tc-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-1);
  margin-bottom: var(--tc-space-3);
}
/* ⚠️ `hidden` MUSS GEWINNEN (06.10.2026), wie bei `.tc-button[hidden]`: Das
   `display: flex` oben schlug die Browser-Regel. Im Zusage-Fenster stand „Ab
   wann" deshalb bei jeder Zusage da, an der Werkbank das Stufenfeld auch bei
   Zielen in Prozent (dessen Wert der Server verwirft). */
.tc-form-group[hidden] { display: none; }

/* ── tc-form-row — zwei Felder nebeneinander ───────────────────────────────
   Das waagerechte Gegenstück zu `.tc-stack`: zwei Formulargruppen in einer
   Zeile, auf schmalen Schirmen untereinander.

   ⚠️ NACHGETRAGEN AM 24.08.2026 bei der Pathfinder-Migration. `.pf-form-row`
   gibt es 32-mal im Projekt und ZWEIMAL im CSS (pathfinder.css:828 und
   pathfinder-ui.css:792) — zwei Wahrheiten über dasselbe Raster. In der
   Library fehlte es ganz, also hätte die Migration es entweder nachgebaut
   oder die pf-Klasse stehen lassen; beides wäre der halbe Weg gewesen.

   ⚠️ DER UMBRUCHPUNKT IST 480px, wie im Bestand. Ein anderer Wert hätte
   dieselben Formulare an anderer Stelle umbrechen lassen als bisher — eine
   sichtbare Änderung, die niemand bestellt hat. (Dass das Projekt neun
   verschiedene Breakpoints ohne Token führt, ist ein eigenes Thema.) */
/* ⚠️ `tc-form-row` STAND HIER EIN ZWEITES MAL — entfernt am 26.08.2026
   (Taskwerk #458). Die Klasse ist weiter unten in dieser Datei noch einmal
   definiert (der `auto-fit`-Block vom 26.08.); bei gleicher Spezifitaet
   gewinnt die spaetere Regel, das feste `1fr 1fr` von hier hat also nie
   gegriffen. Zwei Definitionen derselben Klasse in derselben Datei sind
   zwei Antworten auf eine Frage — und die naechste Aenderung an dieser
   Stelle waere folgenlos geblieben, ohne dass jemand haette sehen koennen,
   warum. Die Varianten `--zwei` und `--drei` stehen jetzt beide unten. */

.tc-form-group__label {
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-semibold);
  color: var(--tc-text-default);
  letter-spacing: var(--tc-tracking-wide);
}

.tc-form-group__label .tc-form-group__required {
  color: var(--tc-danger);
  margin-left: 2px;
}

/* ── Label mit Handgriff daneben (#782, 25.09.2026) ─────────────────────────
   „Armeeliste *" links, „📋 Aus Zwischenablage einfügen" rechts. Am Handy
   rutscht der Knopf unter das Label, statt es zu quetschen. */
.tc-form-group__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-2);
}

/* ── Woher ein Wert kommt (#782) ─────────────────────────────────────────────
   Ein leises Etikett am Label: „aus dem Export". Es sagt, dass der Wert nicht
   von Hand eingetragen wurde — und verschwindet, sobald man das Feld selbst
   ändert (js/ui/listen-export.js). Keine Warnung, deshalb kein Warnton: Die
   Farbe ist der Glanz des Themes, die Fläche nur ein Hauch davon. */
.tc-form-group__quelle {
  display: inline-block;
  margin-left: var(--tc-space-2);
  padding: 0 var(--tc-space-2);
  border: 1px solid rgba(var(--tc-highlight-rgb), 0.35);
  border-radius: var(--tc-radius-full);
  background: rgba(var(--tc-highlight-rgb), 0.1);
  color: var(--tc-highlight);
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-semibold);
  letter-spacing: 0;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: 1px;
}

.tc-form-group__help {
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
  line-height: var(--tc-leading-snug);
}

/* ── Hilfetext mit Aussage (#870, 04.10.2026) ───────────────────────────────
   Zwischen Hilfetext und Fehler: „passt“ und „Achtung, aber kein Fehler“
   (eine gespeicherte Lore gibt es nicht mehr — sie bleibt, bis man neu wählt).
   Vorher standen beide als Seitenklassen `.al-hint--ok/--warn` in
   css/army-lists.css. Nur die Farbe; Größe und Zeilenhöhe bleiben die des Hilfetexts. */
.tc-form-group__help--ok      { color: var(--tc-success); }
.tc-form-group__help--achtung { color: var(--tc-attention); }

.tc-form-group__error {
  font-size: var(--tc-text-xs);
  color: var(--tc-danger);
  font-weight: var(--tc-weight-semibold);
  display: none;
}

.tc-form-group.is-error .tc-form-group__error {
  display: block;
}

.tc-form-group.is-error .tc-input,
.tc-form-group.is-error .tc-select,
.tc-form-group.is-error .tc-textarea {
  border-color: var(--tc-danger);
}


/* ============================================================================
 * tc-input — Text-Input
 * ============================================================================ */
.tc-input {
  width: 100%;
  min-height: 38px;
  padding: var(--tc-space-2) var(--tc-space-3);
  background: var(--tc-bg-input);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  color: var(--tc-text-strong);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  line-height: 1.4;
  transition: border-color var(--tc-motion-fast),
              box-shadow var(--tc-motion-fast),
              background var(--tc-motion-fast);
  box-sizing: border-box;
}

.tc-input:hover {
  border-color: var(--tc-border-strong);
}

.tc-input:focus {
  outline: none;
  border-color: var(--tc-accent);
  box-shadow: 0 0 0 3px var(--tc-accent-glow);
}

/* ---------------------------------------------------------------------------
 * DATUMSFELDER (14.08.2026, Tims Meldung an Old Krenks Stichtag)
 *
 * Gemessen, nicht vermutet: Vor diesem Block traf im GANZEN Portal keine
 * einzige Regel `input[type="date"]` oder den Kalender-Indikator — geprueft
 * ueber alle geladenen Stylesheets. Das Symbol wird deshalb in der
 * Browser-Vorgabe gezeichnet, also dunkel, und liegt auf `--tc-bg-input`
 * (#1f1f1f). Es ist da, man sieht es nur nicht. Genau deshalb wirkte das
 * Feld wie ein Textfeld ohne Datepicker.
 *
 * `filter: invert(1)` dreht es auf hell. Das ist der Weg fuer ein
 * Shadow-DOM-Pseudo, dem man keine `color` geben kann.
 *
 * Die Trefferflaeche wird ausserdem auf Touch-Groesse gebracht: in der
 * Vorgabe ist sie rund 14px breit und damit unter jeder Fingerkuppe
 * (Heuristik 5). Das eigentliche "ueberall klicken oeffnet den Picker"
 * macht tc-ui.js — CSS kann das nicht.
 * ------------------------------------------------------------------------- */
.tc-input[type="date"],
.tc-input[type="time"],
.tc-input[type="datetime-local"] {
  /* Ohne das behaelt iOS die eigene Innenpolsterung und die Feldhoehe
     springt gegenueber den Textfeldern daneben. */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.tc-input[type="date"]::-webkit-calendar-picker-indicator,
.tc-input[type="time"]::-webkit-calendar-picker-indicator,
.tc-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.55;
  cursor: pointer;
  padding: 6px;
  margin-right: -2px;
  transition: opacity var(--tc-motion-fast);
}

.tc-input[type="date"]:hover::-webkit-calendar-picker-indicator,
.tc-input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* Leeres Datumsfeld: Der Platzhaltertext (TT.MM.JJJJ) ist sonst so hell wie
   ein echter Wert und sieht nach "schon ausgefuellt" aus. */
.tc-input[type="date"]:not(:focus):invalid,
.tc-input[type="date"]:not(:focus)[value=""] {
  color: var(--tc-text-muted);
}

.tc-input::placeholder {
  color: var(--tc-text-disabled);
}

.tc-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--tc-bg-surface-1);
}


/* ============================================================================
 * tc-select — Dropdown
 * ============================================================================ */
.tc-select {
  width: 100%;
  min-height: 38px;
  padding: var(--tc-space-2) var(--tc-space-6) var(--tc-space-2) var(--tc-space-3);
  background: var(--tc-bg-input);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  color: var(--tc-text-strong);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  line-height: 1.4;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23b0b0b0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--tc-space-3) center;
  background-size: 12px;
  transition: border-color var(--tc-motion-fast),
              box-shadow var(--tc-motion-fast);
  box-sizing: border-box;
}

.tc-select:hover {
  border-color: var(--tc-border-strong);
}

.tc-select:focus {
  outline: none;
  border-color: var(--tc-accent);
  box-shadow: 0 0 0 3px var(--tc-accent-glow);
}

.tc-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ============================================================================
 * tc-textarea
 * ============================================================================ */
.tc-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--tc-space-3);
  background: var(--tc-bg-input);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  color: var(--tc-text-strong);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-normal);
  resize: vertical;
  transition: border-color var(--tc-motion-fast),
              box-shadow var(--tc-motion-fast);
  box-sizing: border-box;
}

.tc-textarea:hover {
  border-color: var(--tc-border-strong);
}

.tc-textarea:focus {
  outline: none;
  border-color: var(--tc-accent);
  box-shadow: 0 0 0 3px var(--tc-accent-glow);
}


/* ============================================================================
 * tc-checkbox + tc-radio
 * ============================================================================ */
.tc-checkbox-wrapper,
.tc-radio-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  cursor: pointer;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-default);
  line-height: 1.4;
  user-select: none;
  padding: var(--tc-space-1) 0;
}

.tc-checkbox,
.tc-radio {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--tc-accent);
  cursor: pointer;
  flex-shrink: 0;
}

.tc-checkbox-wrapper:hover,
.tc-radio-wrapper:hover {
  color: var(--tc-text-strong);
}

.tc-checkbox:disabled,
.tc-radio:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tc-checkbox-wrapper:has(.tc-checkbox:disabled),
.tc-radio-wrapper:has(.tc-radio:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ============================================================================
 * tc-input--zahl — ein Zahlenfeld, das wie eine Zahl aussieht
 * ----------------------------------------------------------------------------
 * Neu am 26.08.2026. Drei Seiten hatten dafuer drei eigene Klassen mit
 * derselben Regel — `adv-dice-input` (Mordheim), `owbm-track__zahl` (The Old
 * World) und `pf-kasse-coin-input` (Pathfinder). „Pattern auf 2+ Seiten =
 * Komponente" (Heuristik 2).
 *
 * ⚠️ DIE SPINNER MUESSEN IN ZWEI SCHREIBWEISEN WEG. `-moz-appearance` allein
 * laesst sie in Webkit stehen, die Pseudo-Elemente allein in Firefox. Wer nur
 * eine schreibt, sieht auf seinem eigenen Browser ein sauberes Feld.
 *
 * ⚠️ UND ES IST EIN MODIFIER, KEIN [type=number]-SELEKTOR. Nicht jedes
 * Zahlenfeld will die Pfeile los sein — beim Schrittzaehler sind sie die
 * Bedienung. Die Entscheidung gehoert an die Stelle, die das Feld setzt.
 * ========================================================================== */
.tc-input--zahl {
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.tc-input--zahl::-webkit-inner-spin-button,
.tc-input--zahl::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================================================
 * tc-input-group — Input mit Prefix/Suffix
 * (z.B. "500 GC" Input mit "GC" als Suffix)
 * ============================================================================ */
.tc-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.tc-input-group .tc-input,
.tc-input-group .tc-select {
  border-radius: 0;
  flex: 1;
}
.tc-input-group .tc-input:first-child,
.tc-input-group .tc-select:first-child {
  border-top-left-radius: var(--tc-radius-md);
  border-bottom-left-radius: var(--tc-radius-md);
}
.tc-input-group .tc-input:last-child,
.tc-input-group .tc-select:last-child {
  border-top-right-radius: var(--tc-radius-md);
  border-bottom-right-radius: var(--tc-radius-md);
}

/* ⚠️ EINE GRUPPE MIT ZAHLENFELD DARF NICHT UEBER DIE SEITE LAUFEN.
   `tc-input-group` ist `width: 100%` — richtig fuer „Betrag in GC" in einem
   Formular, falsch fuer vier Muenzsorten nebeneinander: Auf der 1400px-Buehne
   wurde daraus ein 200px breites Feld fuer eine zweistellige Zahl (Tim am
   26.08.2026 zum Gewoelbe: „Die Auswahlfelder oben sehen grausig aus").
   `--knapp` misst die Gruppe an ihrem Inhalt. */
.tc-input-group--knapp {
  width: auto;
  flex: 0 0 auto;
}
.tc-input-group--knapp .tc-input { flex: 0 0 auto; width: auto; }

.tc-input-group__addon {
  display: flex;
  align-items: center;
  padding: 0 var(--tc-space-3);
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  color: var(--tc-text-muted);
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-semibold);
  white-space: nowrap;
}
.tc-input-group__addon:first-child {
  border-right: none;
  border-top-left-radius: var(--tc-radius-md);
  border-bottom-left-radius: var(--tc-radius-md);
}
.tc-input-group__addon:last-child {
  border-left: none;
  border-top-right-radius: var(--tc-radius-md);
  border-bottom-right-radius: var(--tc-radius-md);
}

/* ── tc-input-group__auge — Passwort zeigen und verbergen (#894, 26.10.2026) ──
   Stand viermal als Eigenbau (`password-toggle-btn` in login.html,
   reset-password.html zweimal, profile.css): ein Knopf, absolut IN das Feld
   gelegt, mit `padding-right: 50px` am Feld, damit der Text nicht darunter
   laeuft. Hier ist er ein Anhang wie `__addon`, nur zum Druecken: Er sitzt
   neben dem Feld statt darauf, und das Feld braucht kein Sonderpolster.
   Das Umschalten macht js/ui/passwort-auge.js (`data-passwort-auge`).

     <div class="tc-input-group">
       <input class="tc-input" type="password" id="pw" …>
       <button type="button" class="tc-input-group__auge" data-passwort-auge
               aria-controls="pw" aria-pressed="false" aria-label="Passwort anzeigen">👁️</button>
     </div> */
.tc-input-group__auge {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: var(--tc-touch-min);
  padding: 0 var(--tc-space-2);
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-left: none;
  border-top-right-radius: var(--tc-radius-md);
  border-bottom-right-radius: var(--tc-radius-md);
  color: var(--tc-text-muted);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-base);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background var(--tc-motion-fast);
}
.tc-input-group__auge:hover {
  background: var(--tc-bg-surface-2);
}
.tc-input-group__auge:focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: -2px;
}
/* Sichtbar geschaltet: der Anhang leuchtet wie ein gedrueckter Knopf. */
.tc-input-group__auge[aria-pressed="true"] {
  background: color-mix(in srgb, var(--tc-accent) 18%, var(--tc-bg-surface-1));
}


/* ============================================================================
 * TOUCH-OPTIMIERUNG   (ueberarbeitet 13.08.2026, Taskwerk #287)
 * ----------------------------------------------------------------------------
 * Hier stand vorher font-size: var(--tc-text-base). Das sind 0.95rem = 15.2px —
 * und damit 0.8px zu wenig: Safari auf dem iPhone zoomt in die Seite, sobald
 * ein fokussiertes Eingabefeld KLEINER als 16px schreibt, und bleibt danach
 * vergroessert stehen. Die Regel sah nach Touch-Optimierung aus und war eine.
 * Nur nicht gegen den Zoom.
 *
 * 16px ist kein gewaehlter Gestaltungswert, sondern eine Systemschwelle von
 * iOS — wie die 44px bei Touch-Zielen. Deshalb als Zahl und nicht als Token:
 * An einem Token wuerde frueher oder later jemand drehen.
 *
 * Am Schreibtisch aendert sich dadurch nichts, die Media Query greift dort
 * nicht.
 * ========================================================================== */
@media (hover: none) and (pointer: coarse) {

  /* --- Texteingaben: 16px gegen den Zoom, 44px als Ziel ------------------- */
  .tc-input,
  .tc-select,
  .tc-textarea {
    min-height: var(--tc-touch-rec);
    font-size: 16px;
  }

  /* Der Anhang neben einem Feld (Einheit, Waehrung) muss mitwachsen, sonst
     sitzt er versetzt neben dem hoeheren Feld. */
  .tc-input-group__addon {
    min-height: var(--tc-touch-rec);
    font-size: 16px;
  }
  /* Das Passwort-Auge ist ein Daumenziel: 44 x 44 (#894). */
  .tc-input-group__auge {
    min-width: var(--tc-touch-rec);
    min-height: var(--tc-touch-rec);
  }

  /* --- Kaestchen und Punkte ---------------------------------------------- */
  /* Das Kaestchen selbst bleibt klein — ein 44px grosses Quadrat saehe falsch
     aus. Stattdessen bekommt die Zeile drumherum das Touch-Mass: Man trifft
     das Label mit, und genau so bedient man es am Geraet. */
  .tc-checkbox,
  .tc-radio {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .tc-checkbox-wrapper,
  .tc-radio-wrapper {
    min-height: var(--tc-touch-rec);
    /* Etwas Luft nach aussen, damit zwei untereinander nicht aneinanderkleben
       und der Daumen nicht das falsche trifft. */
    padding-block: var(--tc-space-1, 4px);
  }

  /* --- Auswahl-Chips ------------------------------------------------------ */
  .tc-choice__option {
    min-height: var(--tc-touch-rec);
  }

  /* --- Beschriftungen ----------------------------------------------------- */
  /* Fehler- und Hilfetexte bleiben klein, aber nicht winzig: Unter 13px wird
     eine Fehlermeldung am Geraet zur Zumutung, und sie ist der Text, den man
     am dringendsten lesen muss. */
  .tc-form-group__error,
  .tc-form-group__help {
    font-size: 13px;
  }
}

/* ============================================================================
 * tc-choice — Single-Select-Chips (radio-gestützt, eindeutiger Auswahl-State)
 * Generisch: Icon + Text je Option; optionaler Akzent via --tc-choice-accent
 * (RGB-Tripel, z.B. "244,67,54"; Default = --tc-accent-rgb). Auswahl über
 * natives <input type=radio> → :has(:checked); .is-selected als JS-Fallback.
 * ============================================================================ */
.tc-choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
}
.tc-choice__option {
  --_ca: var(--tc-choice-accent, var(--tc-accent-rgb));
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  flex: 1 1 auto;
  min-height: 44px;
  padding: var(--tc-space-2) var(--tc-space-3);
  background: var(--tc-bg-input);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  color: var(--tc-text-default);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-semibold);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--tc-motion-fast),
              background var(--tc-motion-fast),
              box-shadow var(--tc-motion-fast),
              color var(--tc-motion-fast);
}
.tc-choice__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.tc-choice__icon { font-size: 1.15em; line-height: 1; }
.tc-choice__text { line-height: var(--tc-leading-snug); }
/* Zweite Zeile unter dem Namen, gedaempft (25.09.2026, #194 — die Battle
   Tactics im AoS-Begleiter: Name oben, darunter die drei Stufen). */
.tc-choice__sub {
  display: block;
  margin-top: 2px;
  color: var(--tc-text-muted);
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-normal);
  line-height: var(--tc-leading-snug);
}
/* Warum eine Option gesperrt ist (#775): bleibt auch unter der
   Ausgrauung als Grund erkennbar. */
.tc-choice__sub--warnung {
  color: var(--tc-danger);
  font-weight: var(--tc-weight-bold);
}
.tc-choice__option:hover { border-color: var(--tc-border-strong); }
.tc-choice__option:disabled { opacity: 0.45; cursor: not-allowed; }
/* Mehrfachwahl (#803, Meldungs-Einstellungen): <input type="checkbox"> statt
   Radio, der Zustand kommt genauso über :checked. Gesperrt wird dort über
   das Feld selbst — :disabled oben greift nur am <button>. */
.tc-choice__option:has(.tc-choice__input:disabled) { opacity: 0.45; cursor: not-allowed; }
.tc-choice__option:has(.tc-choice__input:disabled):hover { border-color: var(--tc-border-default); }
.tc-choice__option:has(.tc-choice__input:focus-visible) {
  box-shadow: 0 0 0 3px var(--tc-accent-glow);
}
.tc-choice__option:has(.tc-choice__input:checked),
.tc-choice__option.is-selected {
  border-color: rgb(var(--_ca));
  background: rgba(var(--_ca), 0.14);
  color: var(--tc-text-strong);
  box-shadow: inset 0 0 0 1px rgb(var(--_ca));
}
.tc-choice__option:has(.tc-choice__input:checked)::after,
.tc-choice__option.is-selected::after {
  content: "\2713";
  margin-left: auto;
  font-weight: 700;
  color: rgb(var(--_ca));
}

/* --- tc-choice Layout-Modifier (Auswahl-Karten, z.B. Match-Start-Picker) --- */
/* --stack: vertikale Vollbreite-Liste. --grid: Karten-Raster (auto-fill).    */
/* Zweizeiliger Inhalt weiter ueber __text (strong + <br> + gedaempfter span). */
.tc-choice--stack { flex-direction: column; }
.tc-choice--stack .tc-choice__option { flex: 1 1 auto; width: 100%; }
.tc-choice--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.tc-choice--grid .tc-choice__option { flex: initial; }

/* --- tc-choice--spalten: gleich breite Spalten, Symbol über dem Wort -------
 * (#803, 29.09.2026) Für wenige kurze Optionen, die in EINER Zeile stehen
 * müssen — die Wege einer Meldungssorte (Glocke, Push, Mail) im Profil. Am
 * Handy fehlten der gewöhnlichen Zeile 64 px, und „Mail" stand allein in der
 * zweiten. Die Zahl der Spalten setzt --tc-choice-spalten (Vorgabe 3). Das
 * Häkchen wandert in die Ecke, sonst drückt es das Wort aus der Spalte. */
.tc-choice--spalten {
  display: grid;
  grid-template-columns: repeat(var(--tc-choice-spalten, 3), minmax(0, 1fr));
}
.tc-choice--spalten .tc-choice__option {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: var(--tc-space-2) var(--tc-space-1);
  text-align: center;
}
.tc-choice--spalten .tc-choice__text { overflow-wrap: anywhere; }
.tc-choice--spalten .tc-choice__option:has(.tc-choice__input:checked)::after,
.tc-choice--spalten .tc-choice__option.is-selected::after {
  position: absolute;
  top: 3px;
  right: 6px;
  margin: 0;
  font-size: 0.8em;
}

/* --- tc-choice--tiles: grosse zentrierte Wahlkacheln ----------------------
 * Fuer wenige, gleichrangige Entscheidungen, die den Bildschirm dominieren
 * sollen: Icon gross, Titel, Untertitel - alles zentriert untereinander.
 * Gedacht fuer Weggabelungen mitten im Spiel ("wer hat gescort?",
 * "welches Szenario?"), wo man mit dem Tablet auf dem Spieltisch trifft.
 *
 * Ersetzt: .bb-mtch-tdpicker-sidecard (BB Match), .scenario-choice-card
 *          (Mordheim Battle) - strukturell identisch, doppelt gebaut.
 *
 * Faerbung pro Kachel weiter ueber --tc-choice-accent (RGB-Tripel).
 * Default ist der Theme-Akzent; harte Werte nur, wenn die Farbe etwas
 * ueber die Daten aussagt (z.B. Gegner = --tc-danger).
 * ------------------------------------------------------------------------- */
.tc-choice--tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--tc-space-3);
}
.tc-choice--tiles .tc-choice__option {
  flex: initial;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-1);
  min-height: 128px;
  padding: var(--tc-space-5) var(--tc-space-4);
  border-width: 2px;
  border-radius: var(--tc-radius-lg);
  text-align: center;
  transition: border-color var(--tc-motion-fast),
              background var(--tc-motion-fast),
              box-shadow var(--tc-motion-fast),
              transform var(--tc-motion-fast);
}
.tc-choice--tiles .tc-choice__icon {
  font-size: 2.4rem;
  margin-bottom: var(--tc-space-1);
}

/* ⚠️ BILD-ICONS: ausgegraut, solange nicht gewaehlt (22.08.2026, #246).
 * Die Systemauswahl im Profil hatte das als Eigenbau — Logos in Graustufen,
 * bei Auswahl in Farbe. Das ist eine der besten Rueckmeldungen, die eine
 * Kachelauswahl geben kann, und sie funktioniert bei JEDEM Bild-Icon.
 * Deshalb hier statt seitenspezifisch.
 *
 * Nur fuer <img>: Ein Emoji-Icon ausgrauen zu wollen ginge nach hinten los,
 * `filter` trifft dort die Schriftfarbe. */
.tc-choice--tiles .tc-choice__icon img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: grayscale(0.6) brightness(0.7);
  transition: filter var(--tc-motion-fast, 0.2s);
}
.tc-choice--tiles .tc-choice__option:hover .tc-choice__icon img {
  filter: grayscale(0.2) brightness(0.9);
}
.tc-choice--tiles .tc-choice__option:has(.tc-choice__input:checked) .tc-choice__icon img {
  filter: grayscale(0) brightness(1);
}
.tc-choice--tiles .tc-choice__text {
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: var(--tc-text-lg);
  letter-spacing: 1px;
  color: var(--tc-text-strong);
}
/* Untertitel: das gedaempfte <span> nach dem <br> */
.tc-choice--tiles .tc-choice__text span {
  display: block;
  margin-top: var(--tc-space-1);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  font-style: italic;
  letter-spacing: 0;
  color: var(--tc-text-muted);
}
/* Anfassbarkeit: die Kachel hebt sich beim Zeigen und senkt sich beim Druecken.
   Heuristik 4 - die Mikro-Interaktion aus dem BB-Eigenbau bleibt erhalten. */
.tc-choice--tiles .tc-choice__option:hover:not(:disabled) {
  border-color: rgb(var(--_ca));
  background: rgba(var(--_ca), 0.08);
  box-shadow: 0 6px 18px rgba(var(--_ca), 0.45);
  transform: translateY(-2px);
}
.tc-choice--tiles .tc-choice__option:active:not(:disabled) {
  transform: translateY(-1px);
}
/* Das Haekchen der Basis-Komponente passt hier nicht: die Kacheln sind
   Weggabelungen, keine Mehrfach-Vorauswahl mit Bestaetigen-Schritt. */
.tc-choice--tiles .tc-choice__option:has(.tc-choice__input:checked)::after,
.tc-choice--tiles .tc-choice__option.is-selected::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .tc-choice--tiles .tc-choice__option,
  .tc-choice--tiles .tc-choice__option:hover:not(:disabled),
  .tc-choice--tiles .tc-choice__option:active:not(:disabled) {
    transition: none;
    transform: none;
  }
}

/* --- tc-choice--dicht: Kacheln in einem Formular (#1082, 12.10.2026) --------
 * tc-choice--tiles ist für Weggabelungen gebaut, die den Bildschirm
 * beherrschen sollen. In einem Formular (Konto: Spielsysteme und Kernsystem)
 * standen dieselben Kacheln am Handy einzeln untereinander — zwölf Kacheln,
 * 1.830 px, und der Rest des Formulars lag drei Bildschirme tiefer.
 * Mit `--dicht` stehen sie am Handy nebeneinander und sind flacher. Die Zahl
 * der Spalten setzt --tc-choice-spalten (Vorgabe 2). Ab 769 px ändert der
 * Modifier nichts.
 * Nur zusammen mit --tiles. Für kurze Wörter in einer Zeile gibt es
 * tc-choice--spalten.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .tc-choice--tiles.tc-choice--dicht {
    grid-template-columns: repeat(var(--tc-choice-spalten, 2), minmax(0, 1fr));
    gap: var(--tc-space-2);
  }
  .tc-choice--tiles.tc-choice--dicht .tc-choice__option {
    min-width: 0;
    min-height: 76px;
    padding: var(--tc-space-3) var(--tc-space-2);
  }
  .tc-choice--tiles.tc-choice--dicht .tc-choice__icon {
    display: flex;
    justify-content: center;
    max-width: 100%;
    margin-bottom: 0;
    font-size: 1.8rem;
  }
  .tc-choice--tiles.tc-choice--dicht .tc-choice__icon img {
    height: 28px;
    max-width: 100%;
  }
  .tc-choice--tiles.tc-choice--dicht .tc-choice__text {
    font-size: var(--tc-text-sm);
    letter-spacing: 0.5px;
    overflow-wrap: anywhere;
  }
  .tc-choice--tiles.tc-choice--dicht .tc-choice__text span {
    margin-top: 2px;
    font-size: var(--tc-text-xs);
  }
}


/* ===========================================================================
   tc-form-row — zwei (oder mehr) Felder nebeneinander (26.08.2026)
   ---------------------------------------------------------------------------
   Aus `pf-form-row` in die Library geholt: Das Pattern stand auf zwei Seiten
   (Encounter 12x, Innenhof 1x) und ist damit ueber der Schwelle aus
   Heuristik 2 — „Pattern auf 2+ Seiten = Komponente".

   ⚠️ `auto-fit` mit Mindestbreite statt fester `1fr 1fr`: Der Eigenbau
   klappte erst bei 480px auf eine Spalte um. Ein Zahlenfeld-Paar in einem
   schmalen Modal war davor schon zu eng — die Felder entscheiden jetzt
   selbst, ab wann sie untereinander gehoeren. Wer genau zwei gleich breite
   Spalten braucht, nimmt `--zwei`.
   ========================================================================== */
.tc-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--tc-space-3);
  align-items: start;
}
/* Erzwungen zweispaltig — fuer Paare, die zusammengehoeren (RK/TP, von/bis). */
.tc-form-row--zwei { grid-template-columns: 1fr 1fr; }
/* Erzwungen dreispaltig (am 26.08.2026 aus dem entfernten Doppel-Block
   hierher gezogen, damit alle Varianten beieinander stehen). */
.tc-form-row--drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) {
  .tc-form-row--zwei,
  .tc-form-row--drei { grid-template-columns: 1fr; }
}
/* Die Gruppen darin tragen ihren eigenen Abstand schon in der Zeile. */
.tc-form-row > .tc-form-group { margin-bottom: 0; }

/* ── Der Prozentregler (.social-regler) ─────────────────────────────────────
   Zieher und Zahl in einer Zeile: Fortschritt melden, Zielstand wählen.
   ⚠️ STAND BIS #901 (05.10.2026) NUR IN css/social.css. Die Werkbank-Dialoge
   („Wie fertig willst du werden?", „Wie weit bist du?") laufen aber auf
   dashboard.html und untergrund.html, die social.css nicht laden — dort stand
   ein blauer Browser-Regler mit der Zahl irgendwo daneben. tools/reichweite.py
   meldete es nicht, weil es Gruppen unter drei Klassen weglässt. Der Name
   bleibt, damit seine Leser in social.js und werkbank.js stimmen. */
.social-regler { display: flex; align-items: center; gap: var(--tc-space-3); }
.social-regler input[type="range"] {
  flex: 1;
  /* Heuristik 5: die Trefferfläche des Griffs muss am Tablet zu treffen sein. */
  min-height: 36px;
  accent-color: var(--tc-accent);
  cursor: pointer;
}
.social-regler__wert {
  flex: 0 0 auto;
  min-width: 4.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tc-text-strong);
  font-weight: 600;
}
@media (pointer: coarse) {
  .social-regler input[type="range"] { min-height: 44px; }
}