/* ============================================================================
 * COMPONENT · tc-stand, tc-notiz (#1139, live seit 15.10.2026)
 * ----------------------------------------------------------------------------
 * Tim, 15.10.2026: „Bitte den Auftritt mit Krenk harmonisieren, so dass bspw.
 * die Umfragen nach Hobbyprojekten, das Projekt unter der Lampe, mein letztes
 * Projekt etc. alle genau so gut aussehen und die beiden Inhalte verständlich
 * aufgeteilt sind."
 *
 * ✅ Von Tim am 15.10.2026 abgenommen und ausgerollt (#1139).
 *
 * Ein STAND ist der Platz eines Wirts in einem Bezirk: oben sein Kopf (sein
 * Bild als Streifen, der Name des Orts, „bei …", eine Lage, der eine
 * Hauptknopf), darunter seine Fläche aus Holz. In Krenks Werkstatt stehen
 * zwei: Krenks Werkbank und Grubbs Wunschbrett. Wer welchen Stand vor sich
 * hat, sagt das Gesicht, nicht eine Überschrift.
 *
 *   <section class="tc-stand tc-stand--krenk">
 *     <header class="tc-stand__kopf">
 *       <img class="tc-stand__bild" src="assets/schattenmarkt/tuer/krenk.webp" alt="">
 *       <div class="tc-stand__schild">
 *         <h3 class="tc-stand__titel">Die Werkbank</h3>
 *         <p class="tc-stand__wer">bei Old Krenk · 5 Projekte in Arbeit</p>
 *       </div>
 *       <div class="tc-stand__tun">…ein Knopf…</div>
 *     </header>
 *     <div class="tc-stand__flaeche">
 *       <div class="tc-stand__abschnitt">
 *         <p class="tc-stand__marke">Bei dir</p> …
 *       </div>
 *     </div>
 *   </section>
 *
 * ⚠️ DER NAME IST tc-notiz, NICHT tc-zettel: `.tc-zettel` ist der Schandbrief-
 * Zettel am Namen (schmuck.css), und tc-ui.js fängt Klicks darauf ab. Im
 * Entwurf hieß es tc-zettel — in der Library sah es richtig aus, am Dashboard
 * (wo schmuck.css lädt) war jeder Zettel ein Block mit rotem Punkt.
 *
 * Ein ZETTEL ist alles, was man auf einem Stand LIEST: dein Projekt, Krenks
 * Waage, eine Forderung, ein Wunsch. Papier an einer Reißzwecke, Titel und
 * Zahl, ein Balken (tc-xp-bar), ein Fuß, daneben höchstens ein Knopf.
 * Fotos (Lampe, Werkbänke, zuletzt fertig) bleiben Bilder, auf dem Stand mit
 * Papierrand wie ein angeheftetes Foto.
 *
 *   <div class="tc-notiz">
 *     <a class="tc-notiz__weg" href="…">
 *       <img class="tc-notiz__bild" src="…" alt="">          (wahlweise)
 *       <span class="tc-notiz__text">
 *         <span class="tc-notiz__kopf"><span class="tc-notiz__titel">…</span><span class="tc-notiz__zahl"><b>45</b> %</span></span>
 *         <span class="tc-xp-bar__bahn">…</span>              (wahlweise)
 *         <span class="tc-notiz__fuss">…</span>
 *       </span>
 *     </a>
 *     <div class="tc-notiz__tun"><button class="tc-button tc-button--sm …">…</button></div>
 *   </div>
 *
 * MATERIAL STATT THEME (tokens.css K2): Holz, Papier, Tinte, Kreide sind in
 * jedem Theme gleich. Gerechnet (WCAG): --tc-tinte auf --tc-papier 12,6 ·
 * --tc-tinte-leise auf --tc-papier 6,2 · --tc-kreide auf --tc-holz 7,8 ·
 * --tc-kreide-leise auf --tc-holz 4,5. Die Maserung dunkelt nur ab.
 * Library: library-community.html#werkstatt-staende.
 * ========================================================================== */

.tc-stand {
  container: tc-stand / inline-size;
  /* body trägt keine Schrift (CLAUDE.md §9): Der Stand bringt sie mit. */
  font-family: var(--tc-font-body);
  font-variant: normal;
  text-transform: none;
  letter-spacing: normal;
  display: grid;
  border: 3px solid var(--tc-schiefer-rahmen);
  border-radius: var(--tc-radius-md);
  overflow: hidden;
  box-shadow: var(--tc-shadow-md);
}

/* --- Der Kopf: das Gesicht des Wirts als Streifen -------------------------- */
.tc-stand__kopf {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tc-space-2) var(--tc-space-3);
  min-height: 150px;
  padding: var(--tc-space-3) var(--tc-space-4);
  isolation: isolate;
}
.tc-stand__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--stand-bild-x, 60%) var(--stand-bild-y, 30%);
}
/* Links dunkel für die Schrift, rechts frei fürs Gesicht. */
.tc-stand__kopf::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 8, 6, 0.92) 0%, rgba(10, 8, 6, 0.70) 45%, rgba(10, 8, 6, 0.05) 80%),
    linear-gradient(0deg, rgba(10, 8, 6, 0.55) 0%, transparent 55%);
}
.tc-stand__schild { display: grid; gap: 2px; min-width: 0; max-width: 34ch; }
.tc-stand__titel {
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xl);
  line-height: 1.15;
  color: var(--tc-kreide);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.tc-stand__titel a { color: inherit; text-decoration: none; }
.tc-stand__titel a:hover,
.tc-stand__titel a:focus-visible { text-decoration: underline; }
.tc-stand__wer {
  margin: 0;
  font-size: var(--tc-text-sm);
  color: var(--tc-kreide);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
/* Die Frist in Kreide (Grubb zählt …), im letzten Moment glühend. */
.tc-stand__frist {
  justify-self: start;
  width: max-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 1px 9px;
  border: 1px dashed var(--tc-kreide-leise);
  border-radius: var(--tc-radius-full);
  background: rgba(10, 8, 6, 0.55);
  font-family: var(--tc-font-kreide);
  font-size: var(--tc-text-sm);
  color: var(--tc-kreide);
}
.tc-stand__frist.is-bald {
  border-style: solid;
  border-color: var(--tc-fackel-glut);
  box-shadow: 0 0 10px rgba(255, 140, 50, 0.35);
}
.tc-stand__tun { display: flex; flex-wrap: wrap; gap: var(--tc-space-2); }

/* --- Die Fläche: Holz ------------------------------------------------------ */
.tc-stand__flaeche {
  display: grid;
  gap: var(--tc-space-4);
  padding: var(--tc-space-4) var(--tc-space-3) var(--tc-space-4);
  border-top: 3px solid var(--tc-schiefer-rahmen);
  /* Waagerechte Planken (Krenks Werkbank); Grubbs Brett steht senkrecht. */
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 44px),
    repeating-linear-gradient(2deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 7px),
    var(--tc-holz);
}
.tc-stand--grubb .tc-stand__flaeche {
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.10) 0 2px, transparent 2px 23px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 9px),
    var(--tc-holz);
}
.tc-stand--krenk { --stand-bild-x: 62%; --stand-bild-y: 40%; }
.tc-stand--grubb { --stand-bild-x: 55%; --stand-bild-y: 26%; }

.tc-stand__abschnitt { display: grid; gap: var(--tc-space-2); min-width: 0; }
/* Die Abschnitte sagen es in Kreide, wie Grubbs Frist. */
.tc-stand__marke {
  margin: 0;
  font-family: var(--tc-font-kreide);
  font-size: var(--tc-text-base);
  line-height: 1.2;
  color: var(--tc-kreide);
}
.tc-stand__marke--klein { font-size: var(--tc-text-sm); }
.tc-stand__marke small { font-family: var(--tc-font-body, inherit); font-size: var(--tc-text-xs); color: var(--tc-kreide-leise); }
.tc-stand__satz { margin: 0; font-size: var(--tc-text-sm); color: var(--tc-kreide); }
.tc-stand__satz a { color: inherit; }
.tc-stand__satz--rede { font-style: italic; color: var(--tc-kreide-leise); }
.tc-stand__fuss { display: flex; justify-content: flex-end; gap: var(--tc-space-2); }
.tc-stand__fuss .tc-button--ghost,
.tc-stand__tun .tc-button--ghost {
  border-color: var(--tc-kreide-leise);
  color: var(--tc-kreide);
  background: rgba(10, 8, 6, 0.35);
}

/* „Bei dir": Zettel links, das fertige Werk rechts — erst ab 820 px; in der
   halben Dashboard-Spalte untereinander (nebeneinander waren die Zettel nur
   330 px breit). */
.tc-stand__paar { display: grid; gap: var(--tc-space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.tc-stand__paar .wb-trophae--gross { max-height: 280px; }
@container tc-stand (min-width: 820px) {
  .tc-stand__paar { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* --- Fotos auf dem Stand: angeheftet, mit Papierrand ----------------------- */
.tc-stand .wb-trophae {
  border: 5px solid var(--tc-papier);
  border-bottom-width: 5px;
  border-radius: 2px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
.tc-stand .wb-trophae:hover,
.tc-stand .wb-trophae:focus-visible { border-color: var(--tc-papier); box-shadow: 0 0 0 2px var(--tc-highlight), 0 6px 14px rgba(0, 0, 0, 0.45); }
.tc-stand .wb-buehne--streifen .wb-trophae:nth-child(2n) { transform: rotate(0.6deg); }
.tc-stand .wb-buehne--streifen .wb-trophae:nth-child(2n+1) { transform: rotate(-0.5deg); }
/* Die Lampe: ihr Licht fällt aufs Holz. */
.tc-stand .wb-lampe-jetzt {
  border: 0;
  padding: var(--tc-space-3);
  border-radius: var(--tc-radius-md);
  background: radial-gradient(ellipse at 30% 0%, rgba(255, 196, 110, 0.30), rgba(255, 196, 110, 0) 70%);
  box-shadow: none;
}
.tc-stand .wb-lampe-jetzt__titel { color: var(--tc-kreide); font-family: var(--tc-font-kreide); text-transform: none; letter-spacing: 0; font-size: var(--tc-text-base); }
.tc-stand .wb-lampe-jetzt__rede { color: var(--tc-kreide-leise); }
.tc-stand .wb-lampe-jetzt__wort { background: var(--tc-papier); color: var(--tc-tinte); border-color: var(--tc-papier-rand); }
.tc-stand .wb-lampe-jetzt__wer { color: var(--tc-tinte); }
.tc-stand .wb-lampe-jetzt__mehr { color: var(--tc-tinte-leise); }

/* --- Der Zettel ------------------------------------------------------------ */
.tc-notizen { display: grid; gap: var(--tc-space-3); margin: 0; padding: 0; list-style: none; }
.tc-notiz {
  position: relative;
  font-family: var(--tc-font-body);
  font-variant: normal;
  text-transform: none;
  letter-spacing: normal;
  display: flex;
  align-items: center;
  gap: var(--tc-space-2) var(--tc-space-3);
  min-width: 0;
  padding: var(--tc-space-2) var(--tc-space-3);
  border: 1px solid var(--tc-papier-rand);
  border-radius: 2px;
  background: var(--tc-papier);
  color: var(--tc-tinte);
  box-shadow: 0 2px 0 var(--tc-papier-rand), 0 6px 14px rgba(0, 0, 0, 0.35);
  transform: rotate(-0.5deg);
  transition: transform var(--tc-duration-fast) var(--tc-ease-out);
}
.tc-notizen > .tc-notiz:nth-child(2n),
.tc-notizen > :nth-child(2n) > .tc-notiz { transform: rotate(0.45deg); }
.tc-notiz:hover,
.tc-notiz:focus-within { transform: rotate(0deg) translateY(-1px); }
.tc-notiz::before {   /* die Reißzwecke */
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--tc-rahmen-messing-hell), var(--tc-rahmen-messing-dunkel));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.tc-notiz__weg {
  appearance: none;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  min-width: 0;
  min-height: var(--tc-touch-min);
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tc-notiz__weg:focus-visible { outline: 2px solid var(--tc-highlight); outline-offset: 4px; }
.tc-notiz__bild {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  object-fit: cover;
  border: 3px solid var(--tc-papier);
  border-radius: 2px;
  background: rgba(43, 36, 27, 0.10);
  font-size: var(--tc-text-xl);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.tc-notiz__text { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.tc-notiz__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tc-space-2); }
.tc-notiz__titel { min-width: 0; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.tc-notiz__titel small { display: block; font-weight: 400; font-size: var(--tc-text-xs); color: var(--tc-tinte-leise); }
.tc-notiz__zahl { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--tc-text-sm); }
.tc-notiz__zahl b { font-size: var(--tc-text-base); }
.tc-notiz.is-vorn .tc-notiz__zahl b { color: var(--tc-stempel-gut); }
.tc-notiz__fuss { font-size: var(--tc-text-xs); line-height: 1.45; color: var(--tc-tinte-leise); }
.tc-notiz__fuss b { font-weight: 600; color: var(--tc-tinte); }
.tc-notiz .tc-xp-bar__bahn {
  display: block;
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(43, 36, 27, 0.14);
  overflow: hidden;
}
.tc-notiz .tc-xp-bar__fuellung { display: block; }
/* Krenks Waage auf dem Zettel: jeder Vorschlag eine Zeile mit Stimmen. */
.tc-notiz__wahl { display: grid; gap: 2px; }
.tc-notiz__wahl .tc-notiz__titel small { font-size: var(--tc-text-sm); color: var(--tc-tinte); }
.tc-notiz__wahl .tc-xp-bar__bahn { height: 6px; }
.tc-notiz__tun { flex: none; max-width: 100%; min-width: 0; }
/* ⚠️ KNÖPFE AM ZETTEL BRECHEN UM (17.10.2026, Tims Bildschirmfoto: Grubbs
   „Zuletzt gebaut“ am Handy). tc-button steht auf `white-space: nowrap`;
   „Ausprobieren: Blood Bowl: Foto je Spieler in der Teamansicht …“ trägt
   aber den Namen eines Wunsches, also Text von Spielern. Der Knopf machte
   die Textspalte breiter als den Zettel, und die Zeile darüber lief mit
   hinaus. Jetzt bleibt er in der Spalte und bricht um; die Spalte selbst
   ist `minmax(0, 1fr)`, damit kein Kind sie mehr aufdrücken kann. */
.tc-notiz__tun .tc-button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
  text-align: center;
}
.tc-notiz__tun .tc-button--ghost { border-color: var(--tc-tinte-leise); color: var(--tc-tinte); background: transparent; }
.tc-notiz__tun .tc-button--ghost:hover,
.tc-notiz__tun .tc-button--ghost:focus-visible { background: var(--tc-papier-rand); }
/* Ein Aushang, der auf dich wartet (Waage zum Abstimmen, eine Forderung):
   der Zettel bekommt einen roten Stempelrand. */
.tc-notiz.is-wartet { box-shadow: inset 4px 0 0 var(--tc-stempel-weg), 0 2px 0 var(--tc-papier-rand), 0 6px 14px rgba(0, 0, 0, 0.35); }
/* Leer: gestrichelt, eine Einladung statt eines Inhalts. */
.tc-notiz.is-leer { background: rgba(241, 232, 211, 0.86); border-style: dashed; }

/* --- Grubbs Bauhütte (#1145, Entwurf 15.10.2026) ---------------------------
 * Derselbe Stand wie in Krenks Bezirk, mit zwei Teilen mehr:
 *   __ablauf      der Ablauf der Runde als Kreidelinie (zählt · gekürt · gebaut),
 *                 schmal untereinander, ab 560 px Standbreite nebeneinander
 *   __stempel     der Stand einer Fehlermeldung, als Stempel auf dem Zettel
 * Kreide auf Holz wie die Marken (7,8 bzw. 4,5, Kopf dieser Datei); Stempel
 * auf Papier: --tc-stempel-gut 5,3 · --tc-tinte 12,6 · --tc-tinte-leise 6,2. */
.tc-stand__ablauf {
  display: grid;
  gap: var(--tc-space-3);
  margin: 0;
  padding: 0 0 0 var(--tc-space-4);
  list-style: none;
  border-left: 2px dashed var(--tc-kreide-leise);
  font-family: var(--tc-font-body);
}
.tc-stand__schritt { position: relative; display: grid; gap: 1px; min-width: 0; }
.tc-stand__schritt::before {   /* der Kreidepunkt auf der Linie */
  content: '';
  position: absolute;
  top: 0.45em;
  left: calc(-1 * var(--tc-space-4) - 6px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--tc-kreide);
  background: var(--tc-holz);
}
.tc-stand__schritt.is-bald::before {
  border-color: var(--tc-fackel-glut);
  background: var(--tc-fackel-glut);
  box-shadow: 0 0 8px rgba(255, 140, 50, 0.55);
}
.tc-stand__schritt-marke {
  font-family: var(--tc-font-kreide);
  font-size: var(--tc-text-sm);
  line-height: 1.2;
  color: var(--tc-kreide-leise);
}
.tc-stand__schritt-text {
  font-size: var(--tc-text-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--tc-kreide);
  overflow-wrap: anywhere;
}
.tc-stand__schritt-text a { color: inherit; text-decoration-color: var(--tc-kreide-leise); text-underline-offset: 2px; }
.tc-stand__schritt-fuss { font-size: var(--tc-text-xs); line-height: 1.45; color: var(--tc-kreide-leise); }
.tc-stand__schritt-fuss a { color: var(--tc-kreide); }
@container tc-stand (min-width: 560px) {
  .tc-stand__ablauf {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--tc-space-4);
    padding: var(--tc-space-3) 0 0;
    border-left: 0;
    border-top: 2px dashed var(--tc-kreide-leise);
  }
  .tc-stand__schritt::before { top: calc(-1 * var(--tc-space-3) - 6px); left: 0; }
  .tc-stand__schritt-marke { padding-top: 2px; }
}

.tc-notiz__stempel {
  flex: none;
  align-self: start;
  padding: 0 6px;
  border: 2px solid currentColor;
  border-radius: 3px;
  font-size: var(--tc-text-xs);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-3deg);
  color: var(--tc-tinte-leise);
}
.tc-notiz__stempel--arbeit { color: var(--tc-tinte); }
.tc-notiz__stempel--gut    { color: var(--tc-stempel-gut); }

/* --- Grubbs Werk, groß (#1172, live seit 16.10.2026) --------------------------
 * Was sie baut (sonst: was sie zuletzt gebaut hat) als angeheftetes Gemälde
 * mit einem Zettel darauf. Schmal: das Bild als Band über die Standbreite,
 * der Zettel hängt unten halb darüber. Ab 560 px Standbreite: Bild links,
 * Zettel rechts. Papier, Tinte und Stempel wie jeder Zettel (Kontraste im
 * Kopf dieser Datei); der Satz in Tinte-leise 6,2.
 *
 *   <div class="tc-stand__werk tc-stand__werk--arbeit|--gebaut">
 *     <a class="tc-stand__werk-bild" …><img …></a>
 *     <div class="tc-notiz tc-notiz--ohne-bild tc-notiz--werk">
 *       <div class="tc-notiz__text">
 *         <div class="tc-notiz__kopf"><h4 class="tc-notiz__titel"><a>…</a></h4><span class="tc-notiz__stempel …">…</span></div>
 *         <p class="tc-notiz__fuss">…</p> <p class="tc-notiz__rede">…</p> <div class="tc-notiz__tun">…</div>
 *       </div>
 *     </div>
 *   </div> */
.tc-stand__werk { display: grid; min-width: 0; }
.tc-stand__werk-bild {
  display: block;
  aspect-ratio: 16 / 9;
  max-height: 240px;
  overflow: hidden;
  border: 5px solid var(--tc-papier);
  border-radius: 2px;
  background: var(--tc-holz);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  transform: rotate(0.5deg);
}
.tc-stand__werk-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc-stand__werk .tc-notiz--werk {
  position: relative;
  z-index: 1;
  margin: calc(-1 * var(--tc-space-5)) var(--tc-space-3) 0;
  padding: var(--tc-space-3);
}
.tc-notiz--werk .tc-notiz__kopf { align-items: flex-start; }
.tc-notiz--werk .tc-notiz__titel {
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-base);
  line-height: 1.25;
}
.tc-notiz--werk .tc-notiz__titel a { color: inherit; text-decoration: none; }
.tc-notiz--werk .tc-notiz__titel a:hover,
.tc-notiz--werk .tc-notiz__titel a:focus-visible { text-decoration: underline; }
.tc-notiz--werk .tc-notiz__fuss,
.tc-notiz--werk .tc-notiz__rede { margin: 0; }
.tc-notiz__rede { font-size: var(--tc-text-sm); line-height: 1.45; font-style: italic; color: var(--tc-tinte-leise); }
.tc-notiz--werk .tc-notiz__tun { display: flex; flex-wrap: wrap; gap: var(--tc-space-2); margin: var(--tc-space-1) 0 0; }
.tc-notiz--werk .tc-button--primary { min-height: var(--tc-touch-min); }
@container tc-stand (min-width: 560px) {
  .tc-stand__werk { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
  .tc-stand__werk-bild { max-height: none; aspect-ratio: 4 / 3; }
  .tc-stand__werk .tc-notiz--werk { margin: 0 0 0 calc(-1 * var(--tc-space-4)); }
  .tc-notiz--werk .tc-notiz__titel { font-size: var(--tc-text-lg); }
}

/* Schmal: der Kopf wird flacher; bis 520 px rückt der Knopf unter den Text
   (sonst brachen die Titel mitten im Wort, gemessen in der halben Spalte). */
@container tc-stand (max-width: 420px) {
  .tc-stand__kopf { min-height: 128px; padding: var(--tc-space-3); }
  .tc-stand__titel { font-size: var(--tc-text-lg); }
}
@container tc-stand (max-width: 520px) {
  .tc-notiz { flex-wrap: wrap; }
  .tc-notiz__weg { flex-basis: 100%; }
  .tc-notiz__tun { margin-left: calc(52px + var(--tc-space-3)); max-width: calc(100% - 52px - var(--tc-space-3)); }
  .tc-notiz--ohne-bild .tc-notiz__tun { margin-left: 0; max-width: 100%; }
  /* Grubbs Werk (#1172): der Stempel über den Titel, sonst bricht der Titel
     in der halben Breite in fünf Zeilen. */
  .tc-notiz--werk .tc-notiz__kopf { flex-direction: column-reverse; gap: var(--tc-space-1); }
}

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