/* ============================================================================
 * tc-umzug — „Hier war früher …" (07.10.2026, #974)
 * ----------------------------------------------------------------------------
 * Wenn ein Ort umzieht (#960: Werkbank, Album und Gästebuch gehen zu Krenks
 * Werkstatt, der Hocker zu den Terminen), steht an der alten Adresse kein
 * leerer Raum und keine stumme Weiterleitung, sondern ein Holzschild an der
 * verschlossenen Tür: wer hier war, wohin er gezogen ist, ein Satz von ihm und
 * ein Knopf dorthin. Nach ein paar Sekunden geht es von selbst weiter; wer
 * bleiben will, tippt „Hier bleiben". Weiterleitung und Erzählung in einem
 * (Leitregel 5 und 8). Das Schild bleibt mindestens eine Saison stehen.
 *
 * Bild: assets/stadt/umzugsschild.webp (2400 × 1792) — ein leeres Brett an
 * einer verschlossenen Tür, der Pfeil ist eingeschnitzt. Der Text liegt auf
 * dem Brett (21–79 % der Breite, 34–59 % der Höhe; darunter der Pfeil).
 *
 * Struktur (TC.Umzug, js/ui/umzug.js):
 *   <section class="tc-umzug" aria-labelledby="…">
 *     <div class="tc-umzug__tuer">
 *       <div class="tc-umzug__brett">
 *         <span class="tc-umzug__war">Hier war früher</span>
 *         <strong class="tc-umzug__ort" id="…">Old Krenks Werkbank</strong>
 *         <span class="tc-umzug__jetzt">Jetzt: Krenks Werkstatt, am Markt</span>
 *       </div>
 *     </div>
 *     <div class="tc-umzug__fuss">
 *       <img class="tc-umzug__wirt" src="assets/schattenmarkt/avatare/krenk.webp" alt="">
 *       <p class="tc-umzug__satz">„…" <span class="tc-umzug__wer">Old Krenk</span></p>
 *       <a class="tc-button tc-button--primary tc-umzug__los" href="…">Zu Krenks Werkstatt →</a>
 *       <p class="tc-umzug__uhr" aria-live="polite">Weiter in 3 s · <button>Hier bleiben</button></p>
 *     </div>
 *   </section>
 * ========================================================================== */
.tc-umzug {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-4);
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--tc-font-body);
  color: var(--tc-text-default);
}
.tc-umzug__tuer {
  position: relative;
  aspect-ratio: 2400 / 1792;
  max-width: 100%;
  border-radius: var(--tc-radius-lg);
  overflow: hidden;
  background: url('../../assets/stadt/umzugsschild.webp') center / cover no-repeat, var(--tc-bg-canvas);
  box-shadow: var(--tc-shadow-lg);
}
/* Das Brett: Text wie eingebrannt. Die Schrift ist dunkel auf hellem Holz —
   eine Datenfarbe des Bildes, nicht des Themes (§9); sie bleibt in jedem
   Theme dieselbe, weil das Holz dasselbe bleibt. */
.tc-umzug__brett {
  position: absolute;
  /* Unten bleibt die Zeile mit dem eingeschnitzten Pfeil frei (59–64 %). */
  left: 21%;
  right: 21%;
  top: 34%;
  bottom: 41%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  padding: 0 4% 0;
  text-align: center;
  color: #3a2412;
  font-size: clamp(0.62rem, 2.6vw, 1rem);
  line-height: 1.15;
}
.tc-umzug__war {
  font-family: var(--tc-font-display);
  font-size: 0.85em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}
.tc-umzug__ort {
  font-family: var(--tc-font-display);
  font-size: 1.55em;
  font-weight: 700;
  text-wrap: balance;
}
.tc-umzug__jetzt { font-size: 0.9em; font-style: italic; }

.tc-umzug__fuss {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--tc-space-2) var(--tc-space-3);
  align-items: center;
}
.tc-umzug__wirt {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--tc-highlight);
}
.tc-umzug__satz { margin: 0; font-style: italic; line-height: 1.45; }
.tc-umzug__wer {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: var(--tc-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}
.tc-umzug__los { grid-column: 1 / -1; justify-self: start; min-height: 44px; }
.tc-umzug__uhr {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
}
.tc-umzug__uhr:empty { display: none; }
.tc-umzug__bleiben {
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 2px;
  min-height: 36px;
  font: inherit;
  color: var(--tc-text-default);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tc-umzug__bleiben:focus-visible { outline: 2px solid var(--tc-highlight); outline-offset: 2px; }