/* ============================================================================
 * COMPONENT · tc-card
 * ----------------------------------------------------------------------------
 * 7 Variants (+ spaetere, z. B. --zeile). Loest .card, .gm-card, .gm-dash-card, .event-card sowie
 * den PF Champagner-Block ab.
 *
 * KERNSTUECK Option C (Anti-Bland):
 * .tc-card--ornate konsumiert --tc-deco-warm-* Tokens.
 * Im .theme-pathfinder-Container wird sie automatisch champagner-warm.
 * Im .theme-bloodbowl-Container wird sie stahl-grau.
 * Im .theme-aos-Container wird sie mondsilbern.
 * Gleicher Code, theme-abhaengige Stimmung.
 *
 * Joy-of-Use:
 *   - Hover-Glow auf .tc-card--elevated (Border-Color + Lift)
 *   - Subtile Border-Akzente im Header/Footer
 *   - Banner-Overlay-Gradient bei .tc-card--hero
 *   - System-Coding via --tc-card--system-* (Farbband links)
 *
 * Version: 1.0 (29. Mai 2026, Phase 2)
 * ============================================================================ */


/* ============================================================================
 * tc-stack — Kinder untereinander, mit einem Abstand (24.08.2026)
 * ----------------------------------------------------------------------------
 * Das Pattern, das der Library gefehlt hat. Aufgefallen bei der Migration der
 * Pathfinder-Karten: `.pf-card` bringt ein `margin-bottom: 20px` MIT SICH,
 * `.tc-card` nicht — ein Tausch ohne Ersatz liesse die Karten aneinander
 * kleben.
 *
 * ⚠️ DER ABSTAND GEHOERT NICHT AN DIE KOMPONENTE. Eine Karte weiss nicht, ob
 * unter ihr noch etwas kommt; ein Aussenabstand an ihr selbst kollabiert oder
 * verdoppelt sich je nach Nachbarschaft und laesst sich an der letzten Karte
 * nicht abschalten. Der Container entscheidet — deshalb `gap` (dieselbe Regel
 * steht in CLAUDE.md: „sibling groups mit flex/grid und gap, nicht mit
 * per-element margins").
 *
 * ⚠️ ES IST KEIN RASTER. Fuer nebeneinander gibt es fertige Raster
 * (`tc-statcard-grid`, `tc-door-wand`, `tc-ring`). `tc-stack` ist die
 * senkrechte Reihe und sonst nichts — genau deshalb ist er ueberall
 * einsetzbar, nicht nur unter Karten.
 *
 *   .tc-stack          24px  — Karten, Abschnitte
 *   .tc-stack--eng     12px  — Listenzeilen, Formularfelder
 *   .tc-stack--weit    32px  — Seitenabschnitte
 * ============================================================================ */
.tc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-5, 24px);
}
.tc-stack--eng  { gap: var(--tc-space-3, 12px); }
.tc-stack--weit { gap: var(--tc-space-6, 32px); }

/* ============================================================================
 * BASE
 * ============================================================================ */
.tc-card {
  display: flex;
  flex-direction: column;
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-lg);
  padding: var(--tc-space-4);
  transition: background var(--tc-motion-normal),
              border-color var(--tc-motion-normal),
              box-shadow var(--tc-motion-normal),
              transform var(--tc-motion-normal);
}

.tc-card__header {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding-bottom: var(--tc-space-3);
  margin-bottom: var(--tc-space-3);
  border-bottom: 1px solid var(--tc-border-subtle);
}

.tc-card__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}

.tc-card__title {
  flex: 1;
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xl);
  font-weight: var(--tc-weight-semibold);
  color: var(--tc-highlight);
  letter-spacing: var(--tc-tracking-wide);
  /* Ein Wort, das breiter ist als die Karte, bricht (#776). `break-word`
     statt `anywhere`: Es aendert die Mindestbreite nicht, das Layout
     bestehender Karten bleibt also, wie es war. */
  overflow-wrap: break-word;
}

/* Titel-Gruppe (10.08.2026, Abnahme-Befund).
   __header ist display:flex -- liegen __title und __subtitle beide direkt darin,
   landen sie NEBENeinander statt untereinander. Dieser Wrapper stapelt sie und
   uebernimmt das flex:1 vom Titel, damit __actions weiterhin rechts andockt.

   <div class="tc-card__header">
     <div class="tc-card__titles">
       <h3 class="tc-card__title">Titel</h3>
       <p class="tc-card__subtitle">Untertitel</p>
     </div>
     <div class="tc-card__actions">...</div>
   </div>

   Rein additiv: bestehendes Markup ohne __titles verhaelt sich unveraendert. */
.tc-card__titles {
  flex: 1;
  min-width: 0;
}

.tc-card__titles .tc-card__title {
  flex: none;
}

.tc-card__subtitle {
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
  /* Ganz, nicht nur oben: Als <p> brachte der Untertitel sonst den
     Absatzabstand des Browsers mit, und der Kopf stand 16 px zu hoch (#776). */
  margin: 2px 0 0;
}

.tc-card__actions {
  display: flex;
  gap: var(--tc-space-2);
  margin-left: auto;
  flex-shrink: 0;
}

/* Kopf mit langer Handlung (06.10.2026, #887 Etappe 9): Passen Titel und
   __actions nicht nebeneinander, rutscht die Handlung in eine eigene Zeile,
   rechtsbuendig (margin-left: auto oben). Solange alles passt, bleibt der Kopf
   eine Reihe. Zuerst fuer „Alle ausstehenden Links kopieren“ in der
   Verwaltung bei 375 px.
   ⚠️ BEWUSST EIN MODIFIER, NICHT DIE GRUNDREGEL. Als Grundregel gemessen:
   An der klappbaren Karte rutschte bei 375 px der Chevron (kein
   margin-left: auto) nach links in eine zweite Zeile, wo er vorher 2 px
   ueberstand. Wer ihn setzt, hat __actions als letztes Kind. */
.tc-card__header--umbruch { flex-wrap: wrap; }

.tc-card__body {
  flex: 1;
  min-width: 0;
}

.tc-card__footer {
  display: flex;
  gap: var(--tc-space-2);
  justify-content: flex-end;
  align-items: center;
  padding-top: var(--tc-space-3);
  margin-top: var(--tc-space-3);
  border-top: 1px solid var(--tc-border-subtle);
}

/* ── Text und Liste im Rumpf (25.09.2026, #194) ─────────────────────────────
   Bis dahin brachte jede Karte ihre Absatz- und Listenregeln selbst mit — die
   Library-Demos per style-Attribut, das Mordheim-Regelfenster mit fuenf
   eigenen Kartenfamilien. `__text` ist ein Absatz, `__liste` eine Aufzaehlung;
   `--spalten` ist fuer viele kurze Eintraege (Gegenstandsnamen): hoechstens
   zwei Spalten, je mindestens 8em — bei 375 px passen zwei gerade noch, in
   einer schmaleren Karte wird es von selbst eine.
   ⚠️ Kein `display: flex` an der Liste: Die Aufzaehlungszeichen haengen an
   `display: list-item`, der Abstand kommt deshalb ueber die Nachbarregel. */
.tc-card__text {
  margin: 0;
  color: var(--tc-text-default);
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-normal);
}
.tc-card__text + .tc-card__text { margin-top: var(--tc-space-2); }

.tc-card__liste {
  margin: 0;
  padding-left: 1.25em;
  color: var(--tc-text-default);
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-snug);
}
.tc-card__liste > li + li { margin-top: var(--tc-space-2); }
.tc-card__liste > li::marker { color: var(--tc-highlight); }
.tc-card__liste strong { color: var(--tc-text-strong); }

.tc-card__liste--spalten {
  columns: 8em 2;
  column-gap: var(--tc-space-4);
}
.tc-card__liste--spalten > li { break-inside: avoid; }
.tc-card__liste--spalten > li + li { margin-top: var(--tc-space-1); }

/* ── Abzeichen, Aufklapper, Rohtext, Zeilen (25.09.2026, #776) ──────────────
   Gebaut für die Armeelisten (AoS und The Old World), gedacht für jede Karte,
   die einen langen Text trägt oder Menschen aufzählt.

   __marken   eine Reihe tc-badge im Rumpf (Punkte, Drops, Härtegrad, Bilanz).
   __mehr     ein <details> im Rumpf: Die Vorschau steht IM <summary>, ein Tipp
              darauf klappt auf. Aufgeklappt weicht die Vorschau dem ganzen Text.
                details.tc-card__mehr
                  summary
                    span.tc-card__roh.tc-card__roh--vorschau
                    span.tc-card__mehr-griff > __mehr-auf + __mehr-zu
                  pre.tc-card__roh (der ganze Text) …
   __roh      vorformatierter Text, wie er eingefügt wurde (Armeeliste,
              Export). Bricht um statt seitwärts zu scrollen; ab 24rem
              scrollt der Kasten selbst.
   __zeilen   eine Liste von Zeilen mit Trennstrich (Teilnehmer eines Termins).
                ul.tc-card__zeilen > li.tc-card__zeile(--ich)
                  span.tc-card__zeile-name · tc-badge · p.tc-card__zeile-info
              Was eine ganze Breite braucht (eine aufgedeckte Liste als eigene
              tc-card, die eigene Liste als __mehr), nimmt die volle Breite.
   ⚠️ Ein <pre> darf nicht in ein <summary> — die Vorschau ist deshalb ein
   span mit denselben Regeln. */
.tc-card__marken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-2);
}

.tc-card__roh {
  display: block;
  margin: 0;
  padding: var(--tc-space-3);
  max-height: 24rem;
  overflow: auto;
  border: 1px solid var(--tc-border-subtle);
  border-radius: var(--tc-radius-md);
  background: var(--tc-bg-base);
  color: var(--tc-text-default);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tc-card__roh--vorschau {
  max-height: 6.2em;
  overflow: hidden;
  color: var(--tc-text-muted);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
          mask-image: linear-gradient(to bottom, #000 45%, transparent);
}

.tc-card__mehr > summary {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2);
  list-style: none;
  cursor: pointer;
  border-radius: var(--tc-radius-md);
}
.tc-card__mehr > summary::-webkit-details-marker { display: none; }
.tc-card__mehr > summary:focus-visible {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 2px;
}
.tc-card__mehr-griff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-2);
  min-height: var(--tc-touch-min);
  padding: var(--tc-space-1) var(--tc-space-3);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  color: var(--tc-highlight);
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-semibold);
  transition: border-color var(--tc-motion-fast), background var(--tc-motion-fast);
}
.tc-card__mehr-griff::after {
  content: '\25BE';
  transition: transform var(--tc-motion-fast);
}
.tc-card__mehr > summary:hover .tc-card__mehr-griff {
  border-color: var(--tc-border-strong);
  background: var(--tc-bg-surface-2);
}
.tc-card__mehr-zu { display: none; }
.tc-card__mehr[open] .tc-card__mehr-auf,
.tc-card__mehr[open] .tc-card__roh--vorschau { display: none; }
.tc-card__mehr[open] .tc-card__mehr-zu { display: inline; }
.tc-card__mehr[open] .tc-card__mehr-griff::after { transform: rotate(180deg); }
.tc-card__mehr[open] > summary { margin-bottom: var(--tc-space-3); }
.tc-card__mehr > :not(summary) + :not(summary) { margin-top: var(--tc-space-2); }

.tc-card__zeilen {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-card__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-1) var(--tc-space-2);
  min-width: 0;
  padding: var(--tc-space-2) 0;
}
.tc-card__zeile + .tc-card__zeile { border-top: 1px solid var(--tc-border-subtle); }
.tc-card__zeile-name {
  color: var(--tc-text-strong);
  font-weight: var(--tc-weight-bold);
  overflow-wrap: anywhere;
}
.tc-card__zeile--ich .tc-card__zeile-name { color: var(--tc-highlight); }
.tc-card__zeile-info {
  flex-basis: 100%;
  margin: 0;
  color: var(--tc-text-muted);
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-snug);
  overflow-wrap: anywhere;
}
.tc-card__zeile > .tc-card,
.tc-card__zeile > .tc-card__mehr {
  flex-basis: 100%;
  min-width: 0;
  margin-top: var(--tc-space-1);
}
/* Eine Karte in einer Karte spricht leiser: Ihr Titel hat Grundgröße,
   sonst stünde der Name einer Gegnerliste so groß wie das Datum darüber. */
.tc-card .tc-card .tc-card__title {
  font-size: var(--tc-text-base);
  overflow-wrap: anywhere;
}

/* Mehrere Knöpfe im Fuß brechen am Handy um (die Kampfansage trägt vier).
   Hier stand bis #781 auch ein Satz links im Fuß — der Satz steht seitdem
   im Rumpf, die Regel dafür hatte keinen Nutzer mehr. */
.tc-card__footer { flex-wrap: wrap; }


/* ============================================================================
 * VARIANTS
 * ============================================================================ */

/* --- Minimal: flach, kein Background, fuer Listen-Items --- */
.tc-card--minimal {
  background: transparent;
  border: none;
  border-radius: var(--tc-radius-sm);
  padding: var(--tc-space-3);
  transition: background var(--tc-motion-fast);
}
.tc-card--minimal:hover {
  background: var(--tc-bg-surface-1);
}
.tc-card--minimal .tc-card__header {
  padding-bottom: var(--tc-space-2);
  margin-bottom: var(--tc-space-2);
  border-bottom-color: transparent;
}

/* --- Bordered: sichtbarere Border (Standard-Hauptkarten) --- */
/* ── --klappbar: die Karte IST ein <details> ───────────────────────────────
   ⚠️ OHNE DIESEN MODIFIER BRICHT DAS AUFKLAPPEN. `.tc-card` ist
   `display: flex`, und ein `<details>` mit Flex-Anzeige haelt seinen Inhalt
   auch im geschlossenen Zustand offen — im Browser gemessen (24.08.2026):
   92px statt 64px zu, also der halbe Inhalt sichtbar. Im Quelltext sieht
   `<details class="tc-card">` voellig richtig aus.

   Fuer echte Akkordeons mit mehreren Abschnitten gibt es `tc-accordion`
   (eigene Struktur, TC.Accordion). Dieser Modifier ist fuer den einfachen
   Fall: EINE Karte, die man zuklappen kann. */
.tc-card--klappbar { display: block; }
.tc-card--klappbar > summary { list-style: none; cursor: pointer; }
.tc-card--klappbar > summary::-webkit-details-marker { display: none; }
/* Zugeklappt braucht der Kopf keine Trennlinie — darunter kommt nichts. */
.tc-card--klappbar:not([open]) > .tc-card__header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
/* Der ganze Kopf ist das Klickziel — Heuristik 5 gilt auch hier. */
.tc-card--klappbar > summary { min-height: var(--tc-touch-min); }
.tc-card--klappbar > summary:focus-visible {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 2px;
  border-radius: var(--tc-radius-sm);
}
/* ⚠️ DER CHEVRON IST DER EINZIGE HINWEIS, DASS DIE KARTE KLAPPBAR IST.
   Im GM-Cockpit war er im ersten Anlauf ein 0.7rem-Zeichen — gemessen 5px
   breit, als Strich am Rand fuer niemanden sichtbar (06.09.2026, #173).
   Deshalb eine eigene runde Flaeche mit Trefferbreite, die beim Oeffnen
   dreht. Hierher gezogen am 07.09.2026 (vorher .gm-klapp__chevron, nur im
   Cockpit): Eine klappbare Karte ohne Chevron ist eine Funktion, die keiner
   findet — das gilt fuer jede Seite. */
.tc-card__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--tc-border-default);
  background: var(--tc-bg-surface-2);
  font-size: 0.8rem;
  line-height: 1;
  color: var(--tc-highlight);
  opacity: 0.8;
  transition: transform var(--tc-duration-fast, 120ms) ease-out,
              opacity var(--tc-duration-fast, 120ms) ease-out,
              background var(--tc-duration-fast, 120ms) ease-out;
}
.tc-card--klappbar[open] > summary > .tc-card__chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}
.tc-card--klappbar > summary:hover > .tc-card__chevron {
  opacity: 1;
  background: var(--tc-bg-surface-3);
}
@media (prefers-reduced-motion: reduce) {
  .tc-card__chevron,
  .tc-card__mehr-griff,
  .tc-card__mehr-griff::after { transition-duration: 0.01ms; }
}

.tc-card--bordered {
  border-color: var(--tc-deco-ornament-border);
}

/* --- Elevated: mit Schatten + Hover-Lift, fuer interaktive Cards --- */
.tc-card--elevated {
  box-shadow: var(--tc-shadow-md);
  cursor: pointer;
}
.tc-card--elevated:hover {
  transform: translateY(-2px);
  box-shadow: var(--tc-shadow-lg);
  border-color: var(--tc-deco-ornament-border);
}
.tc-card--elevated:active {
  transform: translateY(0);
}

/* --- Accent: mit Akzent-Border-Left (System-Coding kommt da rein) --- */
.tc-card--accent {
  border-left: 4px solid var(--tc-card-accent, var(--tc-accent));
  background: linear-gradient(135deg,
    var(--tc-bg-surface-1) 0%,
    var(--tc-bg-surface-1) 80%,
    rgba(255, 255, 255, 0.01) 100%);
}
/* ⚠️ `--elevated:hover` setzt `border-color` als Kurzform — und die malt die
   linke Kante mit (28.09.2026, beim Umstellen der Terminkarte, #777). Eine
   Karte mit Systemkante verlor beim Zeigen ihre Farbe. Drei Klassen tief,
   damit es unabhaengig von der Reihenfolge gilt. */
.tc-card--accent.tc-card--elevated:hover {
  border-left-color: var(--tc-card-accent, var(--tc-accent));
}

/* --- ORNATE: Pathfinder-Champagner-Vibe (Option C!) ---
   Diese Variante konsumiert --tc-deco-warm-* Tokens.
   Pro Theme andere Stimmung:
     theme-mordheim    → Sepia-Warm (default)
     theme-pathfinder  → Champagner
     theme-bloodbowl   → Stahl
     theme-aos         → Mondsilber
     theme-community   → Gruenlich-warm
*/
.tc-card--ornate {
  background: var(--tc-deco-warm-bg);
  border: 1px solid var(--tc-deco-warm-border);
  border-radius: var(--tc-radius-lg);
  position: relative;
}
.tc-card--ornate .tc-card__title {
  color: var(--tc-deco-warm-text);
  letter-spacing: var(--tc-tracking-widest);
  text-transform: uppercase;
  font-size: var(--tc-text-base);
}
.tc-card--ornate .tc-card__header {
  border-bottom-color: var(--tc-deco-warm-border);
}
.tc-card--ornate .tc-card__footer {
  border-top-color: var(--tc-deco-warm-border);
}

/* --- Hero: gross, mit Banner-Bereich oben --- */
.tc-card--hero {
  border-radius: var(--tc-radius-xl);
  padding: 0;
  overflow: hidden;
}
.tc-card__banner {
  position: relative;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--tc-bg-surface-2);
}
.tc-card__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tc-deco-banner-overlay);
  pointer-events: none;
}
.tc-card__banner-title {
  position: absolute;
  bottom: var(--tc-space-4);
  left: var(--tc-space-5);
  right: var(--tc-space-5);
  z-index: 2;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-2xl);
  color: var(--tc-text-strong);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  letter-spacing: var(--tc-tracking-wide);
  margin: 0;
}
.tc-card--hero .tc-card__header,
.tc-card--hero .tc-card__body,
.tc-card--hero .tc-card__footer {
  padding-left: var(--tc-space-5);
  padding-right: var(--tc-space-5);
}
.tc-card--hero .tc-card__header { padding-top: var(--tc-space-4); }
.tc-card--hero .tc-card__footer { padding-bottom: var(--tc-space-4); }

/* --- Ghost: transparent mit gestrichelter Border --- */
.tc-card--ghost {
  background: transparent;
  border: 1px dashed var(--tc-border-default);
}

/* --- Kompakt, getoent, Ton, gesperrt (26.09.2026, #779) ---------------------
   Gebaut fuer die Mordheim-Karten (Schlacht, Nachbereitung, Handelsposten,
   Kader, Verwaltung). Dort standen gut zwanzig eigene Kartenfamilien, und fast
   alle sagten mit Rand und Hauch etwas ueber die Daten: tot, gewuerfelt,
   Underdog, Angreifer, Verteidiger, bestaetigt, zu teuer.

   --kompakt   fuer Raster und Listen mit vielen kleinen Karten: 12 px Polster,
               Kopf ohne Trennstrich, Titel in Grundgroesse (dieselben Masse
               wie --waehlbar, das sie fuer sich schon hatte).
   --getoent   Rand und Hauch in --tc-card-accent (Vorgabe --tc-highlight).
               Fuer einen ZUSTAND der Karte, nicht fuer ihre Zugehoerigkeit —
               die zeigt --accent als Kante links.
   --ton-*     setzt --tc-card-accent auf eine Datenfarbe (§9): erfolg,
               warnung, gefahr, info, achtung, arkan (Skill-Lila, dieselbe
               Farbe wie tc-button--arcane). Kombinierbar mit --getoent und
               --accent, genau wie --system-*.
   .is-gesperrt an einer --elevated-Karte: Sie ist gerade nicht waehlbar,
               bleibt aber lesbar (Grund steht in der Karte).

     <article class="tc-card tc-card--kompakt tc-card--getoent tc-card--ton-gefahr">
   ⚠️ --getoent steht NACH --accent: Beide setzen den Hintergrund, und die
   Toenung soll gewinnen, wenn eine Karte beides traegt. */
.tc-card--kompakt { padding: var(--tc-space-3); }
.tc-card--kompakt > .tc-card__header {
  padding-bottom: 0;
  margin-bottom: var(--tc-space-2);
  border-bottom: none;
}
.tc-card--kompakt > .tc-card__header:last-child { margin-bottom: 0; }
.tc-card--kompakt .tc-card__title { font-size: var(--tc-text-base); }

.tc-card--getoent {
  border-color: var(--tc-card-accent, var(--tc-highlight));
  background: color-mix(in srgb, var(--tc-card-accent, var(--tc-highlight)) 10%, var(--tc-bg-surface-1));
}

.tc-card--ton-erfolg  { --tc-card-accent: var(--tc-success); }
.tc-card--ton-warnung { --tc-card-accent: var(--tc-warning); }
.tc-card--ton-gefahr  { --tc-card-accent: var(--tc-danger); }
.tc-card--ton-info    { --tc-card-accent: var(--tc-info); }
.tc-card--ton-achtung { --tc-card-accent: var(--tc-attention); }
.tc-card--ton-arkan   { --tc-card-accent: rgb(163, 119, 255); }

.tc-card--elevated.is-gesperrt {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.tc-card--elevated.is-gesperrt:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--tc-border-default);
}
.tc-card--elevated.tc-card--getoent.is-gesperrt:hover {
  border-color: var(--tc-card-accent, var(--tc-highlight));
}

/* --- Waehlbar: die ganze Karte ist eine Wahl (26.09.2026, #152) ---
   Fuer Listen, aus denen man Karten auswaehlt — zuerst die zwei
   Kriegsbanden vor einer Schlacht (js/ui/battle-bandenwahl.js).

   ⚠️ DIE KARTE SELBST IST KEIN KNOPF. Ein <button> darf keine Blockelemente
   tragen, und in der Karte steht ein zweiter Knopf (der Stern). Stattdessen
   ist der TITEL ein Knopf (`__waehler`), dessen ::after die ganze Karte
   ueberdeckt: Ein Tipp irgendwo auf die Karte waehlt, die Tastatur hat ein
   echtes Ziel, und `aria-pressed` sagt den Zustand an. Was in `__actions`
   steht, liegt darueber und bleibt einzeln bedienbar.

     article.tc-card.tc-card--waehlbar(.is-gewaehlt)(.is-gesperrt)
       .tc-card__header
         .tc-card__titles
           h3.tc-card__title > button.tc-card__waehler[aria-pressed]
           p.tc-card__subtitle
         .tc-card__actions > button.tc-button--icon[aria-pressed]
       .tc-card__body > .tc-card__marken

   Gewaehlt: Rand und Hauch in --tc-card-accent (Vorgabe --tc-highlight).
   Eine zweite Wahl in anderer Farbe setzt --tc-card-accent am Element oder
   ueber eine Kontextregel der Seite. Gesperrt: `disabled` am Waehler, die
   Karte blasst ab — der Stern bleibt bedienbar.
   Kompakter als die Grundkarte (Listen mit einem Dutzend Eintraegen): kein
   Trennstrich unter dem Kopf, Titel zwei Stufen kleiner (Cinzel in xl
   brach „Institut fuer angewandte Fehleinschaetzung" bei 375 px dreizeilig). */
.tc-card--waehlbar {
  position: relative;
  min-width: 0;
  padding: var(--tc-space-3);
}
.tc-card--waehlbar .tc-card__header {
  align-items: flex-start;
  padding-bottom: 0;
  margin-bottom: var(--tc-space-2);
  border-bottom: none;
}
.tc-card--waehlbar .tc-card__title { font-size: var(--tc-text-base); }
.tc-card__waehler {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.tc-card__waehler::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--tc-radius-lg);
}
.tc-card__waehler:focus { outline: none; }
.tc-card__waehler:focus-visible::after {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 2px;
}
.tc-card__waehler:disabled { cursor: not-allowed; }
.tc-card--waehlbar .tc-card__actions {
  position: relative;
  z-index: 1;
}
.tc-card--waehlbar .tc-card__actions [aria-pressed="true"] { color: var(--tc-highlight); }
.tc-card--waehlbar:hover { border-color: var(--tc-border-strong); }
.tc-card--waehlbar.is-gewaehlt {
  border-color: var(--tc-card-accent, var(--tc-highlight));
  box-shadow: inset 0 0 0 1px var(--tc-card-accent, var(--tc-highlight));
  background: color-mix(in srgb, var(--tc-card-accent, var(--tc-highlight)) 10%, var(--tc-bg-surface-1));
}
.tc-card--waehlbar.is-gesperrt { opacity: 0.45; }
.tc-card--waehlbar.is-gesperrt:hover { border-color: var(--tc-border-default); }

/* --- Buendig: Baender bis an den Rand (26.09.2026, #779) --------------------
   Fuer eine Karte, die aus Baendern besteht, jedes mit eigener Flaeche und
   eigenem Polster: zuerst die Abschlusskarte je Bande in der Mordheim-
   Nachbereitung (Kennzahlen, Verluste, Einkommen, Goldstand). Die Karte hat
   kein Polster und schneidet an ihrer Rundung ab; Kopf, Rumpf und Fuss bringen
   ihres selbst mit. Jedes andere direkte Kind ist ein Band und liegt bis zum
   Rand. Kombinierbar mit --getoent (der Sieger).

     <article class="tc-card tc-card--buendig">
       <div class="tc-card__header"><h4 class="tc-card__title">…</h4></div>
       <div class="mein-band">…</div>
     </article> */
.tc-card--buendig {
  padding: 0;
  overflow: hidden;
}
.tc-card--buendig > .tc-card__header {
  margin-bottom: 0;
  padding: var(--tc-space-3) var(--tc-space-4);
}
.tc-card--buendig > .tc-card__body,
.tc-card--buendig > .tc-card__footer {
  margin-top: 0;
  padding: var(--tc-space-3) var(--tc-space-4);
}

/* --- Tor: die Karte vor der Tuer (05.10.2026, #194 Etappe 7) ----------------
   Anmelden, Passwort vergessen, neues Passwort, Beitreten, Freischalten und
   die Startseite ohne Anmeldung. Sechs Seiten trugen dieselbe Huelle sechsmal
   inline (`login-card`, `reset-card` zweimal, `join-card`, `activate-card`,
   `landing-card`), mit Altwerten: Flaeche #2d2d2d, Rahmen Blutrot #8b0000.
   Darueber steht ueberall derselbe Kopf, die Ankunft
   (tc-page-header--banner --compact --szene, #789).

   Die Flaeche ist die zweite Stufe (derselbe Grauwert wie vorher), der Rahmen
   traegt den Akzent des Themes. Die Tuer gehoert keinem Spiel, deshalb keine
   Systemfarbe. Mit --buendig bringt die Seite ihr Polster selbst mit
   (Beitreten, Freischalten: dort wechselt der Inhalt per Skript).

     <div class="tc-card tc-card--tor">…</div>
     <div class="tc-card tc-card--tor tc-card--buendig"><div class="mein-rumpf">…</div></div> */
.tc-card--tor {
  background: var(--tc-bg-surface-2);
  border: 2px solid var(--tc-accent);
  box-shadow: var(--tc-shadow-lg);
  text-align: center;
}
.tc-card--tor:not(.tc-card--buendig) {
  padding: var(--tc-space-6);
}
/* Die Tuer ist mittig gesetzt, ihre Felder und Hinweise nicht (#894): Ein
   zentriertes Label ueber einem linksbuendig getippten Feld liest sich wie
   zwei Spalten. */
.tc-card--tor :is(.tc-form-group, .tc-callout) {
  text-align: start;
}
/* Der Fuss einer Tuer ist ein Wegweiser („Zurueck zur Anmeldung"), keine
   Knopfleiste: mittig wie die Karte, leise wie ein Hinweis. */
.tc-card--tor > .tc-card__footer {
  flex-wrap: wrap;
  justify-content: center;
  color: var(--tc-text-muted);
  font-size: var(--tc-text-sm);
}
/* Ein Link-Knopf im Fuss bleibt ein Daumenziel (Heuristik 5): `--link`
   hat sonst keine Mindesthoehe. */
.tc-card--tor > .tc-card__footer .tc-button--link {
  min-height: var(--tc-touch-min);
}
@media (max-width: 480px) {
  .tc-card--tor:not(.tc-card--buendig) {
    padding: var(--tc-space-5) var(--tc-space-4);
  }
}

/* --- Zeile: Kinder nebeneinander (06.10.2026, #887 Etappe 10) --------------
   Fuer eine Karte, die links etwas zeigt, in der Mitte erzaehlt und rechts
   handelt — zuerst der naechste Termin im Hub (Datumskachel, Text, Anmelde-
   Knopf, `hub-next-event.css`) und daneben das Golarion-Datum in
   pathfinder.html. Vorher trugen beide die eigene Huelle `hne__card`.

   Die Karte ordnet nur an: Kinder in einer Reihe, senkrecht mittig, Abstand
   16 px, seitlich mehr Polster als oben und unten. Welches Kind waechst,
   sagt das Kind (`flex: 1` und `min-width: 0` in der Mitte). Am Handy darf die
   Reihe umbrechen — ein Kind mit `width: 100%` landet dann in einer eigenen
   Zeile. Kombinierbar mit --accent (Kante links) und --system-*.

     <div class="tc-card tc-card--zeile tc-card--accent">
       <div class="meine-kachel">…</div><div class="meine-mitte">…</div><a …>…</a>
     </div> */
.tc-card--zeile {
  flex-direction: row;
  align-items: center;
  gap: var(--tc-space-4);
  padding: var(--tc-space-4) var(--tc-space-5);
}
@media (max-width: 600px) {
  .tc-card--zeile { flex-wrap: wrap; }
}


/* ============================================================================
 * SYSTEM-CODING — kombinierbar mit jeder Variante
 * Setzt --tc-card-accent, das von --accent genutzt wird (Border-Left).
 * ============================================================================ */
.tc-card--system-mordheim   { --tc-card-accent: var(--tc-sys-mordheim); }
.tc-card--system-aos        { --tc-card-accent: var(--tc-sys-aos); }
.tc-card--system-pathfinder { --tc-card-accent: var(--tc-sys-pathfinder); }
.tc-card--system-bloodbowl  { --tc-card-accent: var(--tc-sys-bloodbowl); }
/* Old World fehlte bis 09.10.2026, obwohl --tc-sys-oldworld existiert (#887). */
.tc-card--system-oldworld   { --tc-card-accent: var(--tc-sys-oldworld); }
.tc-card--system-community  { --tc-card-accent: var(--tc-sys-community); }
.tc-card--system-social     { --tc-card-accent: var(--tc-sys-social); }


/* ============================================================================
 * TOUCH-OPTIMIERUNG
 * ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  .tc-card--elevated:hover {
    transform: none;
    box-shadow: var(--tc-shadow-md);
  }
  .tc-card--minimal:hover {
    background: transparent;
  }
}