/* ============================================================================
 * COMPONENT · tc-stadtbuch — das Glossar der Stadt (07.10.2026, #948)
 * ----------------------------------------------------------------------------
 * Gezeichnet von TC.Stadtbuch (js/ui/stadtbuch.js) aus der Wortschatz-Kartei
 * (js/data/wortschatz.js). Library: library-community.html „Das Stadtbuch".
 * Seite: stadtbuch.html.
 *
 * Struktur:
 *   .tc-stadtbuch
 *     .tc-stadtbuch__karte          Stadtkarte mit Stecknadeln je Gruppe
 *                                   (auf der Seite im Kopf, .tc-stadtbuch-kopf, siehe unten)
 *       img.tc-stadtbuch__kartenbild
 *       a.tc-stadtbuch__nadel[style="--x;--y"] > img|span + __nadel-name
 *     .tc-stadtbuch__suche          Feld + Trefferzahl (role=status)
 *     .tc-stadtbuch__inhalt
 *       section.tc-stadtbuch__gruppe[--tisch|--stadt|…]
 *         header.tc-stadtbuch__gruppenkopf > __schild + __gruppentitel + __gruppensatz
 *         .tc-stadtbuch__liste > article.tc-card.tc-card--kompakt.tc-stadtbuch__eintrag
 *
 * Die Karteikarte IST eine tc-card (Heuristik 2): Kopf, Text, Fuß kommen aus
 * card.css. Hier steht nur, was das Buch dazugibt: Bezirksfarbe als Rand,
 * „früher: …", der Wirt am Fuß, das Aufleuchten beim Ansprung (#wort).
 *
 * Bezirksfarben: --tc-bezirk-* (tokens.css K5). Jede Gruppe setzt
 * --tc-stadtbuch-farbe; ohne Bezirk (Für alle, Systeme, Wirte) gilt der
 * Theme-Glanz.
 * ========================================================================== */

.tc-stadtbuch {
  --tc-stadtbuch-farbe: var(--tc-highlight);
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-5);
  font-family: var(--tc-font-body);
  color: var(--tc-text-default);
}

/* ---- Die Karte ----------------------------------------------------------- */
.tc-stadtbuch__karte {
  position: relative;
  border-radius: var(--tc-radius-lg);
  overflow: hidden;
  border: 1px solid var(--tc-border-default);
  box-shadow: var(--tc-shadow-lg);
  background: var(--tc-bg-canvas);
  aspect-ratio: 2334 / 1556;
}
.tc-stadtbuch__kartenbild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Unten dunkler, damit die Nadeln am Rand lesbar bleiben. */
.tc-stadtbuch__karte::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, color-mix(in srgb, var(--tc-bg-canvas) 50%, transparent) 100%);
}

.tc-stadtbuch__nadel {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-1);
  min-height: 36px;
  min-width: 36px;
  padding: 2px var(--tc-space-2) 2px 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tc-bg-canvas) 78%, transparent);
  border: 1px solid var(--tc-highlight);
  box-shadow: var(--tc-shadow-md);
  color: var(--tc-text-strong);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--tc-motion-fast), border-color var(--tc-motion-fast), background var(--tc-motion-fast);
}
.tc-stadtbuch__nadel:hover,
.tc-stadtbuch__nadel:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  background: color-mix(in srgb, var(--tc-bg-canvas) 92%, transparent);
  outline: none;
  border-color: var(--tc-text-strong);
}
.tc-stadtbuch__nadel-schild {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.tc-stadtbuch__nadel-zeichen {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex: none;
}

/* Am Handy das Schild und darunter der Kurzname: Die sechs vollen Namen
   überlappen sich auf 375 px, nur Schilder sagten nicht, wohin es geht
   (Tim, 07.10.2026). Vorgelesen wird weiter der volle Name (aria-label). */
.tc-stadtbuch__nadel-kurz { display: none; }
@media (max-width: 600px) {
  .tc-stadtbuch__nadel {
    flex-direction: column;
    gap: 0;
    padding: 2px 2px 3px;
    border-radius: var(--tc-radius-md);
  }
  .tc-stadtbuch__nadel-name { display: none; }
  .tc-stadtbuch__nadel-kurz {
    display: block;
    font-size: var(--tc-text-xs);
    line-height: 1.1;
    white-space: nowrap;
    color: var(--tc-text-strong);
  }
}

/* ---- Der Kopf der Seite: die Karte trägt den Titel (21.10.2026, #981) ------- */
/* Tim: „Der Page Header sieht so trostlos aus und die Karte so cool." Statt
   tc-page-header über der Karte steht der Titel AUF der Karte: Sie läuft nach
   unten in den Grund aus (Maske), dort stehen Titel und Unterzeile in den
   Schriften von tc-page-header (__title, __subtitle, Heuristik 2). Die
   Nadeln liegen höchstens bei 63 % der Höhe; die Maske beginnt darunter.
     <header class="tc-stadtbuch-kopf">
       <div class="tc-stadtbuch-kopf__karte">…TC.Stadtbuch.karte()…</div>
       <div class="tc-stadtbuch-kopf__text">
         <h1 class="tc-page-header__title">Das Stadtbuch</h1>
         <p class="tc-page-header__subtitle">…</p>
       </div>
     </header> */
.tc-stadtbuch-kopf {
  display: grid;
  /* Am Schreibtisch wäre die Karte sonst bildschirmhoch und das Buch darunter
     unsichtbar; 880 px lassen bei 900 px Höhe den Anfang des Buchs stehen. */
  width: 100%;
  max-width: 880px;
  margin: 0 auto var(--tc-space-5);
}
.tc-stadtbuch-kopf .tc-stadtbuch__karte {
  border: 0;
  border-radius: var(--tc-radius-lg) var(--tc-radius-lg) 0 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
.tc-stadtbuch-kopf__text {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--tc-space-6) * -1);
  padding: 0 var(--tc-space-4);
  text-align: center;
}
.tc-stadtbuch-kopf__text .tc-page-header__subtitle { margin: 0 auto; max-width: 46ch; text-wrap: balance; }
@media (min-width: 768px) {
  .tc-stadtbuch-kopf__text { margin-top: calc(var(--tc-space-7) * -1); }
}

/* ---- Suche ---------------------------------------------------------------- */
.tc-stadtbuch__suche {
  display: grid;
  gap: var(--tc-space-1);
  max-width: 480px;
}
.tc-stadtbuch__treffer {
  margin: 0;
  min-height: 1.2em;
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}
.tc-stadtbuch__leer {
  margin: 0;
  color: var(--tc-text-muted);
  font-style: italic;
}

/* ---- Gruppen ---------------------------------------------------------------- */
.tc-stadtbuch__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-6);
}
/* Unter der Kopfleiste (am Handy samt Notch) ankommen, nicht dahinter. */
.tc-stadtbuch__gruppe { scroll-margin-top: calc(var(--tc-space-8) + var(--tc-safe-top, 0px)); }
.tc-stadtbuch__gruppe--tisch      { --tc-stadtbuch-farbe: var(--tc-bezirk-tisch); }
.tc-stadtbuch__gruppe--stadt      { --tc-stadtbuch-farbe: var(--tc-bezirk-stadt); }
.tc-stadtbuch__gruppe--untergrund { --tc-stadtbuch-farbe: var(--tc-bezirk-untergrund); }
.tc-stadtbuch__gruppe--werkstatt  { --tc-stadtbuch-farbe: var(--tc-bezirk-werkstatt); }
.tc-stadtbuch__gruppe--ruhm       { --tc-stadtbuch-farbe: var(--tc-bezirk-ruhm); }

.tc-stadtbuch__gruppenkopf {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  margin-bottom: var(--tc-space-3);
  padding-bottom: var(--tc-space-2);
  border-bottom: 2px solid var(--tc-stadtbuch-farbe);
  scroll-margin-top: calc(var(--tc-space-8) + var(--tc-safe-top, 0px));
}
.tc-stadtbuch__schild {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--tc-stadtbuch-farbe);
  box-shadow: 0 0 12px color-mix(in srgb, var(--tc-stadtbuch-farbe) 35%, transparent);
}
.tc-stadtbuch__schild--zeichen {
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  background: var(--tc-bg-surface-1);
}
.tc-stadtbuch__gruppentitel {
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xl);
  color: var(--tc-stadtbuch-farbe);
  line-height: 1.2;
}
.tc-stadtbuch__gruppensatz {
  margin: var(--tc-space-1) 0 0;
  font-style: italic;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-default);
  max-width: 64ch;
}

/* ---- Die Karteikarten -------------------------------------------------------- */
.tc-stadtbuch__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--tc-space-3);
}
.tc-stadtbuch__eintrag {
  border-left: 3px solid var(--tc-stadtbuch-farbe);
  scroll-margin-top: calc(var(--tc-space-8) + var(--tc-safe-top, 0px));
}
.tc-stadtbuch__eintrag .tc-card__title { font-size: var(--tc-text-lg); }
.tc-stadtbuch__eintrag .tc-card__text { margin: 0; }
.tc-stadtbuch__gesicht {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--tc-border-strong);
}
.tc-stadtbuch__statt {
  margin: var(--tc-space-2) 0 0;
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}
.tc-stadtbuch__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-2);
  margin-top: var(--tc-space-2);
}
.tc-stadtbuch__hin {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-1);
  min-height: 36px;
  font-size: var(--tc-text-sm);
  font-weight: 700;
  color: var(--tc-highlight);
  text-decoration: none;
}
.tc-stadtbuch__hin:hover { text-decoration: underline; text-underline-offset: 3px; }
.tc-stadtbuch__hin:focus-visible {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 2px;
  border-radius: var(--tc-radius-sm);
}
.tc-stadtbuch__wirt {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-1);
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}
.tc-stadtbuch__wirt img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

/* Wer mit #wort kommt, sieht die Karte kurz aufleuchten (Leitregel 4) —
   mit tc-frisch aus dem Bewegungs-Baukasten (tokens.css E3, #933), in der
   Farbe des Bezirks. */
.tc-stadtbuch__eintrag,
.tc-stadtbuch__gruppenkopf { --tc-frisch-farbe: var(--tc-stadtbuch-farbe); }

@media (prefers-reduced-motion: reduce) {
  .tc-stadtbuch__nadel { transition-duration: 0.01ms; }
}