/* ============================================================================
 * tc-merker — der Punkt, der sagt „hier wartet etwas auf dich" (#798)
 * ----------------------------------------------------------------------------
 * Tim, 29.09.2026: „So rote Dots wie bei einem Mailprogramm oder einer App —
 * die Plattform sollte mir eher mitteilen, was ich tun soll."
 *
 * ZWEI SORTEN, und der Unterschied ist die ganze Regel:
 *
 *   tc-merker          ROT, MIT ZAHL — eine AUFGABE. Du musst etwas tun
 *                      (Liste einreichen, bestätigen, nachtragen). Er
 *                      verschwindet, wenn die Sache erledigt ist, nicht wenn
 *                      man hingesehen hat.
 *   tc-merker--neu     KLEINER PUNKT, OHNE ZAHL, in der Farbe des Themes —
 *                      etwas NEUES, das nichts verlangt (eine Tür, die Skarn
 *                      aufgemacht hat). Er verschwindet mit dem Ansehen.
 *
 * Rot bleibt Aufgaben vorbehalten. Wo alles rot ist, ist nichts dringend.
 *
 *   <span class="tc-merker">
 *     <span aria-hidden="true">3</span>
 *     <span class="tc-merker__text">3 Aufgaben</span>
 *   </span>
 *
 * Gebaut wird er über TC.Merker.html(n, {neu, text}) in js/tc-ui.js — dort
 * steht auch „9+" und der vorgelesene Satz.
 *
 * Varianten:
 *   --ecke    sitzt oben rechts auf seinem Träger (App-Symbol, Logo, Knopf).
 *             Der Träger bekommt `tc-merker-traeger` (position: relative).
 *
 * ⚠️ KEIN BLINKEN, KEIN PULSIEREN. Ein Merker bleibt stehen, bis die Sache
 * erledigt ist; wer tagelang pulsiert, wird Tapete (Leitplanke 10). Die Glocke
 * pulsierte bis #803 rot und trägt seitdem den leisen Punkt (nav.css).
 * ⚠️ `--tc-merker` ist ein eigenes Token und NICHT `--tc-danger`: Weiß auf
 * `--tc-danger` (#f87171) hat 2,8 : 1. Auf `--tc-merker` (#dc2626) 4,8 : 1.
 * ========================================================================== */

.tc-merker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--tc-merker, #dc2626);
  color: var(--tc-text-on-merker, #ffffff);
  /* Ein Ring in der Farbe der Fläche darunter trennt den Punkt vom Träger —
     auf einem Logo oder einer Karte ginge der Rand sonst verloren. Wer ihn
     auf einer anderen Fläche braucht, setzt --tc-merker-ring. */
  box-shadow: 0 0 0 2px var(--tc-merker-ring, var(--tc-bg-base, #1a1a1a));
  font-family: var(--tc-font-body, Lato, 'Segoe UI', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}

/* Der vorgelesene Satz („3 Aufgaben"). Eigene Regel statt tc-sr-only, weil
   der Merker auf jeder Seite stehen soll und atoms-extra.css nicht überall
   liegt (§10, „Ein Stilblatt, das auf keiner App-Seite liegt"). */
.tc-merker__text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tc-merker--neu {
  min-width: 0;
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  background: var(--tc-highlight, #d4c4a0);
}

.tc-merker-traeger { position: relative; }

.tc-merker--ecke {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  z-index: 1;
  pointer-events: none;
}

.tc-merker--neu.tc-merker--ecke {
  top: -0.2rem;
  right: -0.2rem;
}

/* ── Wo er in der Navigation sitzt (#798 Etappe 2) ────────────────────────
   Am Reiter zwischen Name und Pfeil (der Reiter ist ein inline-flex mit
   eigenem Abstand), im Handy-Menü vor dem Pfeil, am Burger oben rechts.
   Der Kasten „Für dich" im Menü eines Systems und oben im Handy-Menü ist
   tc-aushang aus der Library; hier steht nur sein Abstand an diesen Orten. */
.tc-nav__burger > .tc-merker--ecke { top: -6px; right: -6px; }

/* ⚠️ MIT `.tc-aushang` DAVOR. layout.js haengt aushang.css NACH diesem
   Blatt ein, und dessen `margin: 0 0 18px` hat dieselbe Spezifitaet — im
   Handy-Menue klebte der Kasten dadurch am Rand (am Pruefstand gesehen). */
.tc-aushang.mm-fuer-dich { margin: 0 0 14px; }

.tc-aushang.tc-nav-sheet__fuer-dich { margin: 10px 14px 12px; }

/* Am Eintrag, zu dem eine Aufgabe führt (Ebene 2 eines Systems, 04.10.2026):
   im Handy-Menü am rechten Rand der Zeile, im Desktop-Menü hinter dem Titel. */
.tc-nav-sheet__link > .tc-merker { margin-left: auto; }
.mm-link__title > .tc-merker { margin-left: 6px; vertical-align: 0.1em; }
.tc-nav-sheet__fuer-dich .tc-aushang__zeile > a { font-family: var(--tc-font-body, Lato, 'Segoe UI', system-ui, sans-serif); }

/* Am Titel einer Terminkarte (Etappe 3): hinter dem Namen des Abends. */
.card-title > .tc-merker,
.tc-termin__titel > .tc-merker { margin-left: 6px; vertical-align: 0.1em; }