/* ============================================================================
 * atoms-extra.css — kleine Atome: tc-divider, tc-icon, tc-avatar,
 *                   tc-spinner / tc-skeleton, tc-tooltip
 * ----------------------------------------------------------------------------
 * Schicht-1-Atome (schnelle Wins). Alle token-getrieben, 0 harte Akzent-Hex.
 * Ersetzen verstreute Inline-Lösungen (border-top-Trenner, Inline-Icon-Größen,
 * Avatar-Pips, Inline-Spinner, ad-hoc Tooltips).
 * ============================================================================ */

/* ============================================================================
 * tc-divider — Trenner zwischen Inhaltsblöcken
 * ========================================================================== */
.tc-divider {
  border: none;
  height: 1px;
  background: var(--tc-border-default, rgba(255,255,255,0.10));
  margin: var(--tc-space-4, 16px) 0;
}
.tc-divider--dashed {
  height: 0;
  border-top: 1px dashed var(--tc-border-default, rgba(255,255,255,0.10));
  background: none;
}
.tc-divider--accent {
  height: 2px;
  background: var(--tc-highlight, var(--tc-accent));
  opacity: 0.5;
  border-radius: 1px;
}
/* --label: Trenner mit zentriertem Text. Markup:
   <div class="tc-divider tc-divider--label"><span>oder</span></div> */
.tc-divider--label {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3, 12px);
  height: auto;
  background: none;
  color: var(--tc-text-muted);
  font-size: var(--tc-text-xs, 0.78rem);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tc-divider--label::before,
.tc-divider--label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tc-border-default, rgba(255,255,255,0.10));
}
/* --vertical: senkrechter Trenner (z.B. zwischen Inline-Aktionen) */
.tc-divider--vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  margin: 0 var(--tc-space-3, 12px);
}

/* ============================================================================
 * tc-icon — einheitlicher Icon-Wrapper (Emoji jetzt, SVG später)
 * ========================================================================== */
.tc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;   /* --md Default */
  height: 20px;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.tc-icon--xs { width: 12px; height: 12px; font-size: 12px; }
.tc-icon--sm { width: 16px; height: 16px; font-size: 16px; }
.tc-icon--lg { width: 24px; height: 24px; font-size: 24px; }
.tc-icon--xl { width: 32px; height: 32px; font-size: 32px; }
.tc-icon img,
.tc-icon svg { width: 100%; height: 100%; display: block; }

/* ============================================================================
 * tc-avatar — Spieler-/Charakter-Avatar mit Fallback-Initiale
 * Markup: <span class="tc-avatar"><img …> ODER <span class="tc-avatar__fallback">T</span></span>
 * ========================================================================== */
.tc-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;   /* --md Default */
  height: 40px;
  border-radius: var(--tc-radius-full, 9999px);
  overflow: hidden;
  background: var(--tc-bg-surface-3);
  flex-shrink: 0;
}
.tc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tc-avatar__fallback {
  font-family: var(--tc-font-display, serif);
  font-weight: 700;
  color: var(--tc-text-on-accent, #1a1a1a);
  background: var(--tc-accent);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.tc-avatar--sm { width: 28px; height: 28px; font-size: 0.8rem; }
.tc-avatar--lg { width: 56px; height: 56px; font-size: 1.4rem; }
/* --xl: das Portraet auf der oeffentlichen Spielerseite. Nachgetragen am
   14.08.2026 — die Klasse stand seit dem Bau der Seite im Markup, ohne dass
   es sie hier gab. Sie war damit wirkungslos: Die 104px kamen in Wahrheit aus
   einer Kontextregel (`.sp-kopf__portrait .tc-avatar`) im Seiten-CSS. Ein
   erfundener Modifier wird nicht rot, er tut einfach nichts — dieselbe Klasse
   Fehler wie ein erfundener Tokenname (CLAUDE.md §9). */
.tc-avatar--xl { width: 104px; height: 104px; font-size: 2.4rem; }
.tc-avatar--square { border-radius: var(--tc-radius-md, 8px); }
/* Online-Status-Punkt */
.tc-avatar.is-online::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: var(--tc-success);
  border: 2px solid var(--tc-bg-base);
}

/* ============================================================================
 * tc-spinner / tc-skeleton — Lade-Indikatoren (Skeleton bevorzugt)
 * ========================================================================== */
.tc-spinner {
  display: inline-block;
  width: 24px;   /* --md Default */
  height: 24px;
  border: 3px solid var(--tc-border-default, rgba(255,255,255,0.12));
  border-top-color: var(--tc-accent);
  border-radius: 50%;
  animation: tc-spin 0.7s linear infinite;
}
.tc-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.tc-spinner--lg { width: 36px; height: 36px; border-width: 4px; }
@keyframes tc-spin { to { transform: rotate(360deg); } }

/* Skeleton: Platzhalter-Flächen mit Shimmer */
.tc-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--tc-bg-surface-2);
  border-radius: var(--tc-radius-sm, 4px);
}
.tc-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent);
  animation: tc-shimmer 1.4s ease infinite;
}
@keyframes tc-shimmer { to { transform: translateX(100%); } }
.tc-skeleton--text   { height: 10px; border-radius: 5px; margin-bottom: 8px; }
.tc-skeleton--text:last-child { margin-bottom: 0; }
.tc-skeleton--title  { height: 18px; border-radius: 6px; width: 50%; }
.tc-skeleton--circle { border-radius: 50%; width: 40px; height: 40px; }
.tc-skeleton--card   { height: 120px; border-radius: var(--tc-radius-lg, 12px); }

/* ============================================================================
 * tc-tooltip — Hinweis bei Hover/Fokus (~400ms Delay)
 * Markup: <span class="tc-tooltip" data-tooltip="Text">Ziel</span>
 * Position-Modifier optional: --top (Default) / --bottom / --left / --right
 * ========================================================================== */
.tc-tooltip {
  position: relative;
  display: inline-flex;
}
.tc-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: var(--tc-z-tooltip, 1600);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--tc-bg-surface-3);
  color: var(--tc-text-strong);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md, 6px);
  padding: 6px 10px;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-xs, 0.78rem);
  white-space: nowrap;
  box-shadow: var(--tc-shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease 0.4s, transform 0.2s ease 0.4s;
}
.tc-tooltip:hover::after,
.tc-tooltip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tc-tooltip--bottom::after {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
.tc-tooltip--bottom:hover::after,
.tc-tooltip--bottom:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tc-spinner { animation-duration: 1.4s; }
  .tc-skeleton::after { animation: none; }
  .tc-tooltip::after { transition: opacity 0.2s ease 0.4s; }
}

/* ============================================================
 * tc-external-link  (Mega-Menue / Hub / Regel-Referenzen)
 * Link auf externe Quelle mit Pfeil-Marker + Neuer-Tab-Semantik.
 * CSS-only. target/rel werden im Markup gesetzt; die
 * Screenreader-Ansage liegt in .tc-external-link__hint.
 * ============================================================ */
.tc-external-link {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-1);
  color: var(--tc-highlight);
  font-family: inherit;
  font-weight: var(--tc-weight-medium);
  text-decoration: none;
  border-radius: var(--tc-radius-sm);
  transition: color var(--tc-motion-fast) var(--tc-ease-out);
}
.tc-external-link::after {
  content: "\2197";            /* up-right arrow (haelt Datei ASCII) */
  font-size: 0.85em;
  line-height: 1;
  opacity: 0.8;
  transition: transform var(--tc-motion-fast) var(--tc-ease-out),
              opacity var(--tc-motion-fast) var(--tc-ease-out);
}
.tc-external-link:hover,
.tc-external-link:focus-visible {
  color: var(--tc-highlight);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tc-external-link:hover::after,
.tc-external-link:focus-visible::after {
  transform: translate(1px, -1px);
  opacity: 1;
}
.tc-external-link:focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: 2px;
}
/* Variante: dezent, fuer Referenz-Listen im Kontextmenue */
.tc-external-link--muted {
  color: var(--tc-text-muted);
  font-weight: var(--tc-weight-normal);
}
.tc-external-link--muted:hover,
.tc-external-link--muted:focus-visible {
  color: var(--tc-text-default);
}
/* ============================================================================
 * TC-SR-ONLY — nur fuer Screenreader, fuer Augen unsichtbar
 * ============================================================================
 * Neu am 12.08.2026 (Tims Entscheidung zu Taskwerk #270).
 *
 * Wofuer: Wenn eine Aussage ausschliesslich ueber Farbe oder Form getroffen
 * wird — gruener Punkt heisst "dabei", grauer heisst "noch offen" —, bekommt
 * ein Screenreader-Nutzer sie gar nicht, und rotgruen-schwache Nutzer nur
 * unzuverlaessig. Diese Klasse traegt den fehlenden Text nach, ohne die
 * Optik anzufassen.
 *
 * Es ist bewusst KEINE neue Technik: Das Muster stand seit jeher hier,
 * nur fest verdrahtet an `.tc-external-link__hint` (dem "oeffnet in neuem
 * Tab"-Hinweis). Damit war es an genau einer Komponente benutzbar. Jetzt
 * teilen sich beide dieselbe Definition — eine Quelle, zwei Namen.
 *
 * WARUM NICHT `display: none` ODER `visibility: hidden`: Beide nehmen das
 * Element auch aus dem Zugaenglichkeitsbaum. Der Text waere dann fuer
 * niemanden da, also genau das Gegenteil.
 *
 * Verwendung:
 *   <span class="pf-char-pip absent" aria-hidden="true">Alderon</span>
 *   <span class="tc-sr-only">Alderon — noch nicht zugesagt</span>
 * ========================================================================== */

.tc-sr-only,
.tc-external-link__hint {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);   /* clip ist veraltet; beides fuer alte Engines */
  white-space: nowrap;
  border: 0;
}

/* Ausnahme, die das Muster erst brauchbar macht: Ist das Element selbst
   fokussierbar (ein Sprunglink etwa), soll es beim Tabben sichtbar werden.
   Ohne diese Regel waere ein unsichtbarer Fokus die Folge — der Nutzer
   tabbt ins Nichts. */
.tc-sr-only--focusable:focus,
.tc-sr-only--focusable:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}
@media (prefers-reduced-motion: reduce) {
  .tc-external-link::after { transition: none; }
  .tc-external-link:hover::after,
  .tc-external-link:focus-visible::after { transform: none; }
}