/* ============================================================================
 * tc-aushang — der Anschlag am Eingang
 * ----------------------------------------------------------------------------
 * Ein gerahmter Kasten mit Marke und Text, der oben an einem Ort haengt und
 * sagt, was gilt. Herausgeloest am 18.09.2026 (#729) aus `.ug-aushang` in
 * css/untergrund.css — dort stand er seit dem 13.08.2026 fuer die
 * Muenzschmelze, und der Untergrund braucht ihn jetzt ein zweites Mal fuer
 * Gorbos Anschlag.
 *
 *   <div class="tc-aushang">
 *     <span class="tc-aushang__marke">Fuer dich</span>
 *     <ul class="tc-aushang__liste">
 *       <li class="tc-aushang__zeile">
 *         <a href="…"><span class="tc-aushang__zeichen">⚔️</span> Satz</a>
 *       </li>
 *     </ul>
 *   </div>
 *
 * Varianten:
 *   --bald      dringlicher Rand, kein Blinken (der Ort ist duester, nicht
 *               hektisch — Leitplanke 10)
 *   --kalender  die Uhren des Ortes: Zeichen, Sache, Datum. Am Handy eine
 *               Zeile je Eintrag, ab 700px nebeneinander.
 *
 * ⚠️ `.ug-aushang` in css/untergrund.css bleibt vorerst bestehen und ist
 * wertgleich — die Muenzschmelze zeigt ihn noch. Wer sie migriert, loescht
 * dort; zwei Wahrheiten ueber denselben Kasten sind genau das Problem aus §11.
 * ========================================================================== */

.tc-aushang {
  padding: 12px 14px;
  margin: 0 0 18px;
  border: 1px solid var(--tc-accent);
  border-left-width: 4px;
  border-radius: var(--tc-radius-md, 10px);
  background: linear-gradient(90deg, rgba(var(--tc-accent-rgb), 0.14), rgba(var(--tc-accent-rgb), 0.04));
}

.tc-aushang__marke {
  display: inline-block;
  font-family: var(--tc-font-display, Cinzel, serif);
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tc-highlight);
  margin-bottom: 6px;
}

.tc-aushang__text {
  font-family: var(--tc-font-body, Lato, 'Segoe UI', system-ui, sans-serif);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--tc-text-default);
  margin: 0;
}

.tc-aushang__text strong { color: var(--tc-highlight); }

.tc-aushang--bald {
  border-color: var(--tc-accent-light);
  box-shadow: 0 0 24px rgba(var(--tc-accent-rgb), 0.22);
}

/* ── Die Liste ─────────────────────────────────────────────────────────── */
.tc-aushang__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Jede Zeile ist ein Link auf die Stelle, die sie meint — ein Anschlag, der
   nur benennt und nicht hinfuehrt, verlagert die Arbeit auf den Leser (§10,
   „Ein Toast ist kein Ort fuer eine Anleitung").
   ⚠️ `--tc-touch-min` als Mindesthoehe, nicht als feste: Ein umgebrochener
   Satz darf wachsen. Heuristik 5. */
.tc-aushang__zeile > a,
.tc-aushang__zeile > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tc-touch-min, 36px);
  padding: 2px 4px;
  border-radius: var(--tc-radius-sm, 6px);
  font-family: var(--tc-font-body, Lato, 'Segoe UI', system-ui, sans-serif);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--tc-text-default);
  text-decoration: none;
  transition: background var(--tc-motion-fast, 120ms) ease;
}

.tc-aushang__zeile > a:hover,
.tc-aushang__zeile > a:focus-visible {
  background: rgba(var(--tc-accent-rgb), 0.12);
  color: var(--tc-highlight);
}

.tc-aushang__zeichen {
  flex: 0 0 auto;
  font-size: 1.05rem;
  line-height: 1;
}

/* Die Frist steht rechts und bricht nie um: Sie ist die Zahl, an der man
   entscheidet, ob es eilt. */
.tc-aushang__frist {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.74rem;
  letter-spacing: .04em;
  color: var(--tc-text-muted);
  white-space: nowrap;
}

.tc-aushang__zeile--eilt .tc-aushang__frist { color: var(--tc-warning, #f9a825); }

/* ── Variante --kalender: die Uhren des Ortes ──────────────────────────── */
/* ⚠️ EINE ZEILE, AUCH AM HANDY — und das ist eine Platzentscheidung, keine
   Geschmacksfrage. Vier Termine untereinander kosten bei 375px rund 200px,
   und dann beginnt die erste Tuer erst unter dem Falz. Nebeneinander mit
   Umbruch sind es zwei Reihen statt vier.
   Die Eintraege tragen deshalb einen KURZEN Namen („Gatter"); der ganze Satz
   steht im `aria-label`, also dort, wo er gebraucht wird. */
.tc-aushang--kalender {
  /* Der Kalender ist eine Fussnote, kein Aushang — er darf enger sein als
     der Kasten darueber. Gemessen bei 375px: Jede eingesparte Zeile ist ein
     Stueck der ersten Tuer. */
  padding: 8px 12px;
  margin-bottom: 12px;
}

.tc-aushang--kalender .tc-aushang__marke { margin-bottom: 2px; }

.tc-aushang--kalender .tc-aushang__liste {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 14px;
}

/* ⚠️ `min-width: 0` am Element selbst, nicht `minmax(0, …)` — das ist Flex,
   kein Grid. Ohne das haelt das laengste unteilbare Wort die Reihe auf und
   die Kachel laeuft ueber (§10, „1fr schrumpft nicht unter den Inhalt"). */
.tc-aushang--kalender .tc-aushang__zeile { min-width: 0; }

.tc-aushang--kalender .tc-aushang__zeile > a,
.tc-aushang--kalender .tc-aushang__zeile > span {
  gap: 6px;
  min-height: 32px;
  font-size: 0.84rem;
  white-space: nowrap;
}

/* ⚠️ 32px SIND WENIGER ALS DIE 36 AUS HEURISTIK 5 — und deshalb steht hier,
   warum. Unter `pointer: coarse` geht es auf den vollen Wert zurueck; am
   Schreibtisch trifft man mit der Maus auch 32px, und jede der bis zu vier
   Zeilen kostet am Handy sonst Platz, den die erste Tuer braucht. */
@media (hover: none) and (pointer: coarse) {
  .tc-aushang--kalender .tc-aushang__zeile > a,
  .tc-aushang--kalender .tc-aushang__zeile > span { min-height: var(--tc-touch-min, 36px); }
}

/* Kein `margin-left: auto` hier: In einer Reihe schoebe es das Datum an den
   rechten Rand DER GANZEN ZEILE statt neben seinen Termin. */
.tc-aushang--kalender .tc-aushang__frist {
  margin-left: 0;
  color: var(--tc-highlight);
  font-size: 0.78rem;
  font-weight: 600;
}

.tc-aushang--kalender .tc-aushang__zeichen { font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
  .tc-aushang__zeile > a { transition: none; }
}