/* ============================================================================
 * untergrund.css — Der Untergrund als Ort
 * ----------------------------------------------------------------------------
 * Grundlage: SCHATTENGOLD-V2-BRIEFING §7. Der Untergrund ist kein Formular mit
 * Hintergrundbild, sondern ein bespielter Ort: Man steigt hinab, steht in einer
 * Gasse, und hinter jeder Tür wartet ein Wirt mit Gesicht und Stimme.
 *
 * MOBILE-FIRST ist hier keine Formalie (Leitplanke 10): Die Nutzungssituation
 * ist Sofa und Basteltisch, nicht Schreibtisch. Alle Maße sind zuerst für
 * 375px gedacht; die Breakpoints erweitern nach oben. Hit-Targets ≥ 44px.
 *
 * REDUCED-MOTION steht am Ende der Datei und ist Pflicht (CLAUDE.md §9):
 * animation-duration: 0.01ms + iteration-count: 1 + delay: -1ms.
 * NICHT `animation: none` — dabei fällt der Endzustand weg, und was
 * eingeblendet werden sollte, bliebe für immer unsichtbar.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 0. Die Grundschrift
 *
 * Gemessen, nicht angenommen: `body` hat auf dieser Plattform GAR KEINE
 * font-family — auch nicht auf oldworld.html oder den anderen Systemseiten.
 * Die Schrift kommt überall aus den Komponentenklassen selbst; wer eine neue
 * Seite baut und sich auf eine Vererbung verlässt, bekommt Times.
 * Deshalb steht sie hier einmal für den ganzen Ort. Auf `.theme-untergrund`
 * und nicht auf `:root` — das ist die Regel aus CLAUDE.md §9 und sorgt
 * nebenbei dafür, dass die Zeile keine andere Seite trifft.
 *
 * Die Grundfarbe steht seit 14.08.2026 daneben: Ohne sie erbt jeder Text,
 * dessen Klasse keine Farbe setzt (oder dessen Stildatei fehlt), das
 * Browser-Schwarz — auf dem braunen Gewölbe unlesbar. Genau so stand Old
 * Krenks Werkbank da, bevor ihre Komponenten-CSS hier ankam. Mit der
 * Grundfarbe fällt diese Fehlerklasse künftig auf Lesbar statt auf Schwarz.
 * ------------------------------------------------------------------------- */
body.theme-untergrund {
  font-family: Lato, 'Segoe UI', system-ui, sans-serif;
  color: var(--tc-text-default, #ddd);
  /* ⚠️ DER GRUND GEHOERT AUCH AUF DEN BODY (23.08.2026, von Tim gemeldet:
     „Im Untergrund kann ich bei Meisterin Grubb den dunklen Hintergrund
     wegscrollen.")

     Bis dahin trug ihn AUSSCHLIESSLICH die Kulisse (`.ug-bg`, seit dem
     05.09.2026 `tc-scene`) — eine `position: fixed`-
     Ebene mit `z-index: -1`. Am Schreibtisch stimmt das nachweislich (bei
     Scroll 4400 stand sie weiter auf top 0 / unten 868). In einem
     eingebetteten WebView — Tims Screenshot kam aus dem Facebook-Browser —
     traegt die Konstruktion nicht: Wo die Ebene aussetzt, ist `body`
     durchsichtig, und was man sieht, ist die nackte Leinwand.

     Die Farbe ist das untere Ende des Verlaufs in `tc-scene`
     (`--tc-scene-unten`), also genau das,
     was am unteren Bildrand ohnehin zu sehen waere. Wo die Ebene traegt,
     faellt der Rueckfall nicht auf; wo sie aussetzt, sieht es aus wie
     vorgesehen statt schwarz.

     *Eine Seite, deren Grund nur an einer fixed-Ebene haengt, hat keinen
     Grund — sie hat einen Vorhang.* */
  background-color: #0d0a07;
}

/* ---------------------------------------------------------------------------
 * 1. Das Gewölbe — jetzt `tc-scene` (05.09.2026, Taskwerk #435)
 * ---------------------------------------------------------------------------
 * Hier stand `.ug-bg`: zwei Laternen über einem rußigen Grund, eine kalte
 * Bodenzone, ein Schleier Staub. Sie liegt jetzt in
 * css/components/scene.css als `tc-scene`.
 *
 * ⚠️ DER ANLASS WAR EIN FEHLER, KEIN AUFRÄUMWUNSCH. Die drei Raumseiten
 * (Album, Kladde, Terminraum) laden diese Datei und das Eintritts-Overlay,
 * trugen aber KEIN `.ug-bg`-Element — nachgezählt am 05.09.2026. Wer durch
 * eine Tür ging, verlor die Beleuchtung: übrig blieb die Rückfallfarbe auf
 * dem body. Der Ort verschwand in dem Moment, in dem man ihn betrat.
 *
 * Eine Klasse, die genau eine Seite von vieren trägt, ist keine Kulisse.
 *
 * Der Rückfall auf `body` (Zeile ~57) bleibt hier: Er gehört zum Theme, nicht
 * zur Komponente — und er ist der Grund, aus dem eine fixed-Ebene im
 * eingebetteten Browser nicht die einzige Quelle des Hintergrunds sein darf.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * 2. Der Eintritts-Moment — jetzt `tc-entrance` (05.09.2026, Taskwerk #435)
 * ---------------------------------------------------------------------------
 * Hier stand `.ug-eingang`. Er liegt jetzt in css/components/entrance.css,
 * weil die Zitadelle (#433) denselben Moment bekommen soll und ein
 * Seiten-Stilblatt dafür der falsche Ort ist.
 *
 * ⚠️ SEIN REDUCED-MOTION-BLOCK STAND IN ABSCHNITT 6, 850 Zeilen weiter
 * unten — zusammen mit den Münzen und den Räumen. Beim Herausheben fällt so
 * etwas leicht durchs Raster; er ist mit umgezogen und steht in der
 * Komponente direkt unter den Animationen, die er betrifft.
 *
 * Die Sitzungsprüfung sitzt weiterhin im JS (js/ui/untergrund-eintritt.js).
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * 3. Die Kasse — Kontostand, immer sichtbar
 * Sie klebt oben, weil im Untergrund jede Entscheidung eine Geldentscheidung
 * ist. Wer nicht weiß, was er hat, klickt nicht.
 *
 * ⚠️ SEIT #732 IST SIE DER BAUSTEIN `tc-kasse` (css/components/kasse.css,
 * Variante `--klebt`) und ein Knopf zu Gorbos Hauptbuch. Hier standen die
 * sechs Regeln von `.ug-kasse`; nach dem Umbau hatten sie keinen Erzeuger
 * mehr. Die Seite gibt nur noch den Abstand zum Inhalt darunter vor.
 * ------------------------------------------------------------------------- */
#ug-container > .tc-kasse { margin-bottom: 18px; }

/* ---------------------------------------------------------------------------
 * 4. Die Gasse — die Türen der Etablissements
 * ---------------------------------------------------------------------------
 * ⚠️ HIER STANDEN 18 REGELBLÖCKE, UND SIE SIND AM 03.09.2026 GEFALLEN
 * (Taskwerk #559). Die Gasse zeichnet jetzt `tc-door tc-door--portrait` in
 * einer `tc-door-wand` — css/components/door.css, demonstriert in
 * library-navigation.html.
 *
 * Der Grund steht in door.css selbst: Die Komponente wurde am 24.08.2026 aus
 * genau diesen Regeln herausgelöst, weil die Zitadelle dieselbe Kachel
 * brauchte. Der Ursprung ist danach zehn Tage lang nicht mitgezogen — es gab
 * zwei Wahrheiten darüber, wie eine Tür aussieht, und die Library-Fassung war
 * die aus dem Untergrund geborene.
 *
 * Mitgefallen sind `.ug-tuer--zu` und `.ug-tuer__siegel`: Sie hatten schon
 * vorher NULL Erzeuger — kein `_tuerHtml` hat sie je gesetzt.
 *
 * Was NICHT mitgefallen ist, steht direkt darunter: `.ug-intro`.
 * ------------------------------------------------------------------------- */

/* Der Einleitungssatz über der Gasse. Eigene Klasse statt einer geliehenen:
   Die Tür-Beschreibung hätte hier funktioniert und wäre bei der nächsten
   Änderung an ihr stillschweigend mitgewandert.
   ⚠️ Das Argument ist seit dem 03.09.2026 noch stärker: Die Tür-Beschreibung
   heißt jetzt `tc-door__was` und liegt in der Library — sie zu leihen hieße,
   an einem Satz im Untergrund zu hängen, der in der Zitadelle mitgeändert
   wird. */
.ug-intro {
  font-family: Lato, 'Segoe UI', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tc-text-default);
  max-width: 60ch;
  margin: 0 0 20px;
}

/* ---------------------------------------------------------------------------
 * 5. Der Raum — ein Etablissement von innen
 * ------------------------------------------------------------------------- */
.ug-raum { animation: ugAuf 340ms ease-out both; }

.ug-raum__zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--tc-border-color);
  border-radius: var(--tc-radius-md, 10px);
  background: transparent;
  color: var(--tc-text-default);
  font: inherit;
  cursor: pointer;
  /* Ohne Uebergang sprang der Rand hart um — bei einer Taste, die man in
     jedem Raum drueckt, faellt genau das auf (#349). */
  transition: border-color var(--tc-motion-fast) var(--tc-ease-out),
              color var(--tc-motion-fast) var(--tc-ease-out);
}
.ug-raum__zurueck:hover { border-color: var(--tc-accent); color: var(--tc-highlight); }
.ug-raum__zurueck:active { transform: translateX(-2px); }

/* --- Der Wirt --- */


/* Die Wirt-Rede. Kein Sprechblasen-Zipfel: Bei fünf Wirten mit sehr
   unterschiedlichen Textlängen wird der Zipfel zur Fummelei, und die
   kursive Zeile mit Anführungszeichen liest sich ohnehin als Rede. */
/* Lato statt Cinzel — gemessen, nicht nach Gefühl entschieden: Cinzel setzt
   Kleinbuchstaben als Kapitälchen. Für eine Überschrift ist das der Reiz, für
   Gorbos zwei Sätze wird daraus eine Wand aus Grossbuchstaben, die niemand
   liest. Der kursive Satz mit den Anführungszeichen trägt die Rede auch ohne
   Schmuckschrift (Heuristik 8: Lesbarkeit gewinnt). */

/* --- Der Tresor: Kontostand groß, darunter die Bewegungen --- */
.ug-tresor__stand {
  text-align: center;
  padding: 22px 16px;
  margin-bottom: 20px;
  border: 1px solid var(--tc-deco-warm-border);
  border-radius: var(--tc-radius-lg, 14px);
  background: radial-gradient(320px 180px at 50% 0%, rgba(192,120,46,0.14), transparent 70%),
              var(--tc-bg-surface-1);
}

.ug-tresor__wert {
  font-family: Cinzel, serif;
  font-size: clamp(2.4rem, 13vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  color: var(--tc-highlight);
  text-shadow: 0 0 30px var(--tc-highlight-glow);
}

.ug-tresor__einheit {
  font-family: Cinzel, serif;
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tc-deco-warm-text);
  margin-top: 6px;
}

.ug-tresor__neben {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--tc-text-muted);
}

.ug-tresor__neben b { color: var(--tc-text-default); font-weight: 600; }

.ug-buch { list-style: none; margin: 0; padding: 0; }

/* Die Hauszeile in Gorbos Ausgabenliste (#730). Gorbo fuehrt die Buecher der
   ganzen Gasse, und wer hier liest, will wissen, WO sein Geld hingeht —
   nach Betrag sortiert waere es eine Tabelle, nach Haus ist es eine Karte.
   Leise: Die Ueberschrift ordnet, die Zeilen darunter tragen die Auskunft. */
.ug-buch__haus {
  margin: 14px 0 2px;
  padding: 0 12px;
  font-family: var(--tc-font-display);
  font-size: 0.78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}
.ug-buch__haus:first-of-type { margin-top: 4px; }

.ug-buch__zeile {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(61, 74, 99, 0.22);
}
.ug-buch__zeile:last-child { border-bottom: 0; }

.ug-buch__grund { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--tc-text-default); }

/* Zeilen, die irgendwohin führen (die Ausgaben-Liste im Tresor). 44px, weil
   sie am Handy mit dem Daumen getroffen werden — Leitplanke 10. */
.ug-buch__zeile--klick {
  cursor: pointer;
  min-height: 44px;
  border-radius: var(--tc-radius-sm, 6px);
  transition: background var(--tc-motion-normal);
}
.ug-buch__zeile--klick:hover,
.ug-buch__zeile--klick:focus-visible {
  background: rgba(var(--tc-accent-rgb), 0.10);
  outline: none;
}
.ug-buch__zeile--klick:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--tc-accent-rgb), 0.5);
}
.ug-buch__zeit  { font-size: 0.74rem; color: var(--tc-text-muted); white-space: nowrap; }

/* Worauf genau gewettet wurde — nur bei Hobbyzielen, wo der Name des
   Zielsetzers allein nichts sagt (17.08.2026). Eigene Zeile statt Anhaengsel:
   Zieltitel koennen lang sein ("6 Schmutzritter bemalen"), und in derselben
   Zeile wuerden sie die Quote wegdruecken. `white-space: normal` hebt das
   nowrap der Nachbarzeile bewusst auf. */
.ug-buch__worauf {
  display: block;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--tc-text-muted);
  white-space: normal;
}

.ug-buch__betrag {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}
/* Plus und Minus sind DATEN-Farben (CLAUDE.md §9): Sie bedeuten etwas über
   den Wert, nicht über die Stimmung — deshalb hart, nicht aus dem Theme. */
.ug-buch__betrag--plus  { color: #6bbf59; }
.ug-buch__betrag--minus { color: #cf6a5a; }

/* --- Die Baustelle: Feature-Börse --- */
.ug-wunsch {
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--tc-border-color);
  border-radius: var(--tc-radius-md, 10px);
  background: var(--tc-bg-surface-2);
}

.ug-wunsch--fuehrt {
  border-color: var(--tc-accent);
  box-shadow: 0 0 0 1px var(--tc-accent-glow), 0 8px 26px rgba(0,0,0,0.4);
}

/* --- Die drei Zustände nach dem Rennen (14.08.2026) ---
   Ein Sieger ist nicht mehr im Rennen, sondern auf der Werkbank. Er bekommt
   deshalb eine eigene Kante statt des Führungs-Glimmens — sonst sähen
   „führt gerade" und „wird gebaut" gleich aus, und das sind gegensätzliche
   Aussagen. */
.ug-wunsch--arbeit {
  border-color: var(--tc-success, #6bbf59);
  border-left-width: 3px;
  background: linear-gradient(90deg, rgba(107, 191, 89, 0.07), transparent 60%);
}

.ug-wunsch--fertig { opacity: 0.72; }

.ug-wunsch__marke {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid var(--tc-success, #6bbf59);
  border-radius: 999px;
  font-family: Cinzel, serif;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-success, #6bbf59);
  white-space: nowrap;
}

.ug-wunsch__marke--fertig {
  border-color: var(--tc-border-color, #3d4a63);
  color: var(--tc-text-muted);
}

/* ============================================================================
   GRUBBS STEMPEL — abgelehnte Vorschlaege (20.08.2026)
   ----------------------------------------------------------------------------
   Sie waren vorher unsichtbar: `abgelehnt` fehlte in der Gruppierung, also
   verschwand ein Vorschlag samt Begruendung aus der Ansicht. Serverseitig gab
   es den Zustand seit jeher, samt vollstaendiger Erstattung.

   Die Ablehnung ist KEINE Datenfarbe im Sinne von "gescheitert" — niemand
   verliert hier etwas (Briefing 7.4, Schutzregel 2: "Niemand verliert je SG
   an ein Veto"). Deshalb gedaempftes Rostrot statt Alarmrot: Es ist eine
   Entscheidung, kein Fehler.
   ========================================================================== */
.ug-stempelkasten {
  border: 1px solid var(--tc-border-subtle);
  border-radius: var(--tc-radius-md);
}

.ug-stempelkasten__auf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;                /* Touch-Ziel */
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.ug-stempelkasten__auf::-webkit-details-marker { display: none; }

.ug-stempelkasten__auf::after {
  content: '\25BE';
  margin-left: auto;
  color: var(--tc-text-muted);
  transition: transform var(--tc-motion-fast) ease;
}

.ug-stempelkasten[open] > .ug-stempelkasten__auf::after { transform: rotate(180deg); }

.ug-stempelkasten__zahl { font-size: 0.82rem; color: var(--tc-text-muted); }

.ug-stempelkasten .ug-wunsch { margin: 0 12px 12px; }

.ug-wunsch--abgelehnt { opacity: 0.85; }

.ug-wunsch--abgelehnt.is-mine {
  opacity: 1;
  border-color: var(--tc-accent);
}

.ug-wunsch__marke--abgelehnt {
  border-color: #a4553c;
  color: #c4785c;
}

/* Der eigentliche Stempel: der Wortlaut, in Grubbs Stimme. Eingerueckt mit
   einer Kante links — wie ein Vermerk am Rand eines Bauplans. */
.ug-stempel__grund {
  margin: 8px 0 0;
  padding: 6px 0 6px 12px;
  border-left: 3px solid #a4553c;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--tc-text-default);
}

.ug-stempel__grund--leer {
  border-left-color: var(--tc-border-subtle);
  color: var(--tc-text-muted);
}

.ug-stempel__wer {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--tc-text-muted);
}

.ug-stempel__meiner {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--tc-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ug-stempelkasten__auf::after { transition-duration: 0.01ms; }
}


/* Der Spatenstich-Aushang: dieselbe Form wie die Münzschmelze-Ankündigung,
   aber im Grün des Gelingens statt im Laternen-Bernstein. */
.ug-aushang--sieg {
  border-color: var(--tc-success, #6bbf59);
  background: linear-gradient(90deg, rgba(107, 191, 89, 0.16), rgba(107, 191, 89, 0.04));
}
.ug-aushang--sieg .ug-aushang__marke { color: var(--tc-success, #6bbf59); }

.ug-wunsch__kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }

.ug-wunsch__platz {
  font-family: Cinzel, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tc-highlight);
  min-width: 1.6em;
}

.ug-wunsch__titel {
  flex: 1;
  font-family: Cinzel, serif;
  font-size: 1rem;
  color: var(--tc-highlight);
  margin: 0;
}

.ug-wunsch__summe {
  font-family: Cinzel, serif;
  font-weight: 700;
  color: var(--tc-highlight);
  white-space: nowrap;
}

.ug-wunsch__text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--tc-text-default);
  margin: 0 0 10px;
}

.ug-wunsch__fuss {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--tc-text-muted);
}

.ug-wunsch__leiste {
  height: 4px;
  border-radius: 2px;
  background: rgba(61, 74, 99, 0.35);
  overflow: hidden;
  margin: 8px 0 10px;
}

.ug-wunsch__leiste-fuellung {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tc-accent-dark), var(--tc-accent-light));
  transition: width var(--tc-motion-normal);
}

/* Der ruhige Countdown in der Abschnittsüberschrift. Nur außerhalb des
   Endspurts sichtbar — in den letzten Tagen übernimmt der Aushang. */
.ug-rennen__rest {
  margin-left: 10px;
  font-family: Lato, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tc-text-muted);
}

/* --- Wer draufgelegt hat (14.08.2026, „wie bei Kickstarter") ---
   Eine schlichte Liste, größter Beitrag zuerst. Bewusst keine Balken je
   Person: Der Balken darüber misst den Wunsch gegen die anderen Wünsche —
   ein zweiter Balken daneben mit anderer Bezugsgröße würde beide unlesbar
   machen. Die Zahl reicht. */
.ug-geber {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px dashed rgba(61, 74, 99, 0.35);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.ug-geber__zeile {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.ug-geber__name {
  font-size: 0.8rem;
  color: var(--tc-text-default);
  overflow-wrap: anywhere;
}

.ug-geber__betrag {
  font-family: Cinzel, serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tc-highlight);
  white-space: nowrap;
}

/* Der größte Beitrag bekommt die Krone — nicht als Wertung der Person,
   sondern weil man beim Überfliegen sehen soll, wer das Ding trägt. */
.ug-geber__zeile.ist-groesster .ug-geber__betrag::after {
  content: ' \1F451';   /* Krone als Escape (CLAUDE.md §6: content immer escapen) */
}

/* --- Kommentare am Wunsch (14.08.2026) ---
   Eine zugeklappte Leiste unter jedem Eintrag. Der Griff ist bewusst leise
   (muted, klein) — das Rennen bleibt die Hauptsache, das Gespräch ist die
   Fußnote. Hit-Target trotzdem ≥ 44px (Touch-First, Leitplanke 10). */
.ug-kommentare {
  margin-top: 8px;
  border-top: 1px dashed rgba(61, 74, 99, 0.45);
}

.ug-kommentare__griff {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  color: var(--tc-text-muted);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--tc-motion-fast) var(--tc-ease-out);
}
.ug-kommentare__griff::-webkit-details-marker { display: none; }
.ug-kommentare__griff:hover { color: var(--tc-highlight); }
.ug-kommentare[open] .ug-kommentare__griff { color: var(--tc-text-default); }

/* Steht anstelle des Push-Knopfes, wenn man in dieser Saison schon gelegt
   hat. Bestätigend, nicht sperrend — man hat etwas getan, nicht etwas
   verpasst. */
.ug-wunsch__erledigt {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tc-success, #6bbf59);
}

/* Urheber-Zeile am Wunsch: Gesicht plus Name, statt eines grauen „von X"
   (Tim, 14.08.2026). Der Name trägt jetzt dieselbe Farbe wie im Kommentar —
   wer etwas eingebracht hat, soll erkennbar sein. */
.ug-urheber {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ug-urheber__name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tc-text-default);
}

/* Hier standen zwoelf Regeln fuer den Kommentar selbst (Bild, Kopf, Name,
   Zeit, Loeschkreuz, Text, Eingabezeile). Seit dem 16.09.2026 (#511) zeichnet
   ihn der Library-Faden tc-comment-thread aus css/components/comment-thread.css.
   Das Loeschkreuz hatte hier 36px Trefferflaeche und die Library keine — die
   ist dorthin mitgezogen, damit Galerie und Gaestebuch sie auch haben.
   Uebrig bleiben hier nur Klappe und Griff darum; die Eingabezeile ist
   tc-comment-form--eingebettet. */


/* Schnellwahl für den Stichtag. Umbricht am Handy, statt die Knöpfe zu
   stauchen — drei Knöpfe nebeneinander wären auf 375px je 100px breit und
   damit unter der Touch-Vorgabe. */
.ug-schnellwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ug-schnellwahl .tc-button { min-height: 44px; }

/* --- Der Aushang: die angekündigte Münzschmelze ---
   Er steht in jedem Raum. Bewusst NICHT rot/warnend: Die Reform ist kein
   Fehler, sondern ein Ereignis, auf das man sich freuen soll. Deshalb das
   Laternen-Bernstein des Ortes, nur kräftiger. */
.ug-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));
}

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

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

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

.ug-aushang .tc-button { margin-top: 10px; }

/* Die letzten zwei Tage: derselbe Aushang, nur dringlicher. Kein Blinken —
   der Ort ist düster, nicht hektisch, und ein pulsendes Element wäre nach
   Leitplanke 10 auf dem Sofa nur lästig. */
.ug-aushang--bald {
  border-color: var(--tc-accent-light);
  box-shadow: 0 0 24px rgba(var(--tc-accent-rgb), 0.22);
}

/* --- Die Münzschmelze: die Vorschau, an der Tim entscheidet ---
   Vier Spalten in einer festen Rasterbreite, damit die Zahlen untereinander
   stehen und man die Bewegung auf einen Blick liest. Auf 375px passt es mit
   dreistelligen Beträgen genau — mehr braucht es hier nicht, die Gruppe hat
   neunzehn Zeilen. */
.ug-reform {
  border: 1px solid var(--tc-border-color);
  border-radius: var(--tc-radius-md, 10px);
  overflow: hidden;
}

.ug-reform__zeile {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(61, 74, 99, 0.22);
}
.ug-reform__zeile:last-child { border-bottom: 0; }

/* ============================================================================
   DER UMTAUSCHBELEG BEI GORBO (20.08.2026)
   ----------------------------------------------------------------------------
   Er war ein Modal, das genau einmal aufging — und danach für immer weg war,
   obwohl der Server ihn bei jedem Aufruf mitliefert. Jetzt steht er
   zugeklappt im Tresor: vorhanden, ohne das Hauptbuch zu verdrängen.
   ========================================================================== */
.ug-beleg { border: 1px solid var(--tc-border-subtle); border-radius: var(--tc-radius-md); }

.ug-beleg__auf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 44px;                      /* Touch-Ziel */
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.ug-beleg__auf::-webkit-details-marker { display: none; }

.ug-beleg__auf::after {
  content: '\25BE';
  margin-left: auto;
  color: var(--tc-text-muted);
  transition: transform var(--tc-motion-fast) ease;
}

.ug-beleg[open] > .ug-beleg__auf::after { transform: rotate(180deg); }

.ug-beleg__kurz { font-size: 0.82rem; color: var(--tc-text-muted); }

.ug-beleg__inhalt { padding: 0 12px 12px; }

/* --- Die Erklärung, wo die Frage entsteht (#757) -------------------------
   Tim: „Kannst du die Anleitungsinformationen nicht kontextbasiert anbieten?
   Jetzt stehen sie eingeklappt am Ende der Seite." Seitdem hängt an jeder
   Sache ein Fragezeichen, das genau ihre Frage beantwortet — im Fenster,
   nicht am Seitenende. */
.ug-erklaer-knopf {
  /* Heuristik 5: 36px Trefferfläche, auch wenn der Kreis kleiner aussieht.
     Das ::after liegt UNTER dem Kreis und ragt über ihn hinaus. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--tc-deco-warm-border, #6b5433);
  border-radius: 50%;
  background: transparent;
  color: var(--tc-text-muted);
  font-family: var(--font-body, Lato, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: color var(--tc-motion-fast, 120ms) var(--tc-ease-out, ease),
              border-color var(--tc-motion-fast, 120ms) var(--tc-ease-out, ease);
}
.ug-erklaer-knopf::after {
  content: '';
  position: absolute;
  inset: -7px;                 /* 22 + 2*7 = 36 */
  border-radius: 50%;
}
.ug-erklaer-knopf:hover,
.ug-erklaer-knopf:focus-visible { color: var(--tc-highlight, #e8cf9a); border-color: var(--tc-accent); }

/* Am Ruf steht statt eines nackten Fragezeichens ein ganzer Satz: Dort ist
   die Frage („woher kommen die?") wichtiger als die Überschrift daneben. */
.ug-erklaer-zeile {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 8px;
  font-size: 0.86rem;
  color: var(--tc-text-muted);
}
.ug-erklaer-zeile .ug-erklaer-knopf { margin-left: 0; margin-right: 8px; }
.ug-erklaer-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tc-highlight, #e8cf9a);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ug-erklaer-link:hover { color: var(--tc-accent); }

@media (prefers-reduced-motion: reduce) {
  .ug-erklaer-knopf { transition-duration: 0.01ms; }
}

/* Der Inhalt der Erklärung — im Fenster (TC.Modal), nicht mehr am Seitenende. */
.ug-ordnung__inhalt { display: grid; gap: 4px; }
.ug-ordnung__frage {
  margin: 12px 0 0;
  font-family: var(--font-gothic, Cinzel, serif);
  font-size: 0.95rem;
  color: var(--tc-highlight, #e8cf9a);
}
.ug-ordnung__inhalt > .ug-ordnung__frage:first-child { margin-top: 0; }
.ug-ordnung__antwort { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--tc-text-default); }

/* Die Treppe der Türen: je Stufe Zeichen, Name, Schwelle und Zustand. */
.ug-ordnung__treppe { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ug-ordnung__tuer {
  padding: 8px 10px;
  border-left: 2px solid var(--tc-border-subtle);
  border-radius: 0 var(--tc-radius-sm, 4px) var(--tc-radius-sm, 4px) 0;
  background: color-mix(in srgb, var(--tc-bg-surface-2) 55%, transparent);
  display: grid;
  gap: 2px;
}
/* Offen heißt: gehört dir schon. Der Rand traegt es, nicht eine zweite Farbe. */
.ug-ordnung__tuer.is-offen { border-left-color: var(--tc-accent); }
.ug-ordnung__tuer-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.ug-ordnung__zeichen { font-size: 1rem; line-height: 1; }
.ug-ordnung__tuer-kopf b { color: var(--tc-text-strong); font-size: 0.92rem; }
.ug-ordnung__schwelle { font-size: 0.78rem; color: var(--tc-text-muted); }
/* Der Zustand steht rechts — am Handy rutscht er in die naechste Zeile. */
.ug-ordnung__zustand { font-size: 0.78rem; color: var(--tc-text-muted); margin-left: auto; white-space: nowrap; }
.ug-ordnung__tuer.is-offen .ug-ordnung__zustand { color: var(--tc-success, #7fae6b); }
.ug-ordnung__tuer-satz { font-size: 0.85rem; color: var(--tc-text-muted); font-style: italic; }

/* Woher die Fitpunkte kommen. Zwei Spalten, am Handy eine. */
.ug-ordnung__punkte {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 4px 14px;
  font-size: 0.88rem;
}
.ug-ordnung__punkt {
  display: inline-block; min-width: 2.1em;
  font-weight: 700; color: var(--tc-highlight, #e8cf9a);
  font-variant-numeric: tabular-nums;
}
.ug-ordnung__fuss {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--tc-border-subtle);
  font-size: 0.88rem; color: var(--tc-text-default);
}

/* Gorbo am Tiegel im Schmelzbeleg (#735). Das Bild steht auf der
   Besorgungsliste; fehlt es, nimmt `onerror` den Rahmen weg. */
.ug-beleg__bild {
  display: flex;
  justify-content: center;
  margin-bottom: var(--tc-space-3, 12px);
}
.ug-beleg__bild img {
  width: min(160px, 50%);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--tc-radius-md, 8px);
  border: 1px solid var(--tc-border-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .ug-beleg__auf::after { transition-duration: 0.01ms; }
}

/* ----------------------------------------------------------------------------
   NACHZUG — wen die Schmelze nicht erreicht hat
   ----------------------------------------------------------------------------
   Die Zeile mit `--warn` ist ein Sonderfall, der ausdruecklich NICHT
   angefasst wird. Sie muss sich von den nachtragbaren unterscheiden, sonst
   liest man den Knopf darunter als "alle".
   -------------------------------------------------------------------------- */
.ug-nachzug { margin-top: 12px; }

.ug-nachzug__text { margin: 0 0 10px; font-size: 0.88rem; color: var(--tc-text-default); }

.ug-reform__zeile--warn { opacity: 0.75; }

.ug-reform__zeile--warn .ug-reform__name em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--tc-warning);
}

.ug-reform__name {
  font-size: 0.88rem;
  color: var(--tc-text-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ug-reform__alt {
  font-family: Cinzel, serif;
  font-size: 0.9rem;
  color: var(--tc-text-muted);
  text-decoration: line-through;
  min-width: 3.4em;
  text-align: right;
}

.ug-reform__pfeil { color: var(--tc-text-muted); font-size: 0.8rem; }

.ug-reform__neu {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--tc-highlight);
  min-width: 3.4em;
  text-align: right;
}

/* Die Probe aus dem Briefing. Grün und Rot sind hier DATEN-Farben — sie sagen
   „bestanden" bzw. „nicht bestanden", nicht „schön" (CLAUDE.md §9). */
.ug-reform__probe {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--tc-radius-md, 10px);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #8fd47e;
  background: rgba(107, 191, 89, 0.10);
  border: 1px solid rgba(107, 191, 89, 0.32);
}

.ug-reform__probe--fehl {
  color: #e8907f;
  background: rgba(207, 106, 90, 0.10);
  border-color: rgba(207, 106, 90, 0.38);
}

/* --- Kleine Bausteine, die mehrere Räume brauchen --- */
.ug-abschnitt { margin-bottom: 26px; }

.ug-abschnitt__titel {
  font-family: Cinzel, serif;
  font-size: 1.05rem;
  color: var(--tc-highlight);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--tc-deco-warm-border);
}

.ug-leer {
  padding: 22px 16px;
  text-align: center;
  font-style: italic;
  color: var(--tc-text-muted);
  border: 1px dashed var(--tc-border-color);
  border-radius: var(--tc-radius-md, 10px);
}

/* Der Münzhaufen im Tresor — er reagiert auf den Kontostand (Klasse aus dem
   JS) und ist die eine Mikro-Interaktion, die Gorbo zusteht. */
.ug-muenzhaufen {
  font-size: 1.5rem;
  letter-spacing: -0.35em;
  margin-top: 10px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6));
}

.ug-muenzhaufen span {
  display: inline-block;
  animation: ugMuenzeFaellt 520ms cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.ug-muenzhaufen span:nth-child(2) { animation-delay: 70ms; }
.ug-muenzhaufen span:nth-child(3) { animation-delay: 140ms; }
.ug-muenzhaufen span:nth-child(4) { animation-delay: 210ms; }
.ug-muenzhaufen span:nth-child(5) { animation-delay: 280ms; }

@keyframes ugMuenzeFaellt {
  from { opacity: 0; transform: translateY(-16px) rotate(-14deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

/* ---------------------------------------------------------------------------
 * 6. Reduced Motion — Pflicht (CLAUDE.md §9)
 * Dauer auf 0.01ms statt `animation: none`, damit der ENDZUSTAND erhalten
 * bleibt. Mit `none` wäre der Eintritts-Moment für immer sichtbar (er blendet
 * sich per Animation aus) und die Münzen unsichtbar.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* `.ug-eingang*` stand hier mit — die Schwelle ist seit dem 05.09.2026
     `tc-entrance`, und entrance.css bringt ihre eigene Regel mit. Ein
     Eintrag, der ins Leere zeigt, sieht aus wie eine Absicherung und ist
     keine. */
  .ug-raum,
  .ug-muenzhaufen span {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: -1ms !important;
  }
  /* `.ug-tuer` stand hier mit — die Tür ist seit dem 03.09.2026 `tc-door`,
     und door.css bringt ihre eigene Regel mit (transition-duration: 0.01ms
     statt none, also die Fassung aus CLAUDE.md §9). */
  .ug-wunsch__leiste-fuellung { transition: none; }
}

/* Skarns Tafel stand hier bis zum 17.09.2026 als eigene Wettkarte. Seit #690
   ist sie tc-kreidetafel mit tc-quote (css/components/kreide.css), abgenommen
   von Tim in der Library (library-community.html#skarns-haus). */


/* ============================================================================
 * DIE LAUFENDE SAISON IM KOPF (13.08.2026)
 * ----------------------------------------------------------------------------
 * Tim: "In den Seasons gilt das Schattengold. Sollte auch im Untergrund noch
 * mal stehen." Hier wird es ausgegeben — wer heruntersteigt, soll wissen, in
 * welchem Zeitraum er sich bewegt.
 *
 * Bewusst zurueckhaltend: eine Zeile unter dem Untertitel, keine zweite
 * Ueberschrift. Der Untergrund hat schon einen Kopf.
 * ========================================================================== */
.ug-saison {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--tc-space-2, 8px);
  padding: 4px 12px;
  border: 1px solid var(--tc-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-size: var(--tc-text-xs, 0.8rem);
  color: var(--tc-text-muted, #9e9e9e);
}
.ug-saison:empty { display: none; }
.ug-saison__icon { font-size: 0.95rem; line-height: 1; }
.ug-saison__text strong { color: var(--tc-highlight, #e8cf9a); }

/* Der Schmelztermin neben der Saison.
   ⚠️ ER IST NICHT DAS SAISONENDE — der Sommer 2026 endet am 31.08. und
   schmilzt nicht, die erste faellige Saison ist der Herbst am 30.11.
   Begruendung im Kasten in js/ui/untergrund.js. Die letzten vierzehn Tage
   werden waermer, wie beim Saisonband im Dashboard. */
.ug-saison__schmelze {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 4px;
  padding: 2px 10px;
  border: 1px solid var(--tc-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 999px;
  color: var(--tc-text-muted, #9e9e9e);
}

.ug-saison__schmelze.is-bald { border-color: #a4553c; color: #c4785c; }

.ug-saison__leise { font-size: 0.92em; opacity: 0.8; }

/* Am Handy bricht der Kasten um, statt die Zeile zu sprengen — die Klammer
   mit dem Saisonnamen faellt dabei weg: Die Tageszahl ist die Information,
   der Rest ist Kontext. */
@media (max-width: 640px) {
  .ug-saison { flex-wrap: wrap; }
  .ug-saison__schmelze { margin: 4px 0 0; }
  .ug-saison__leise { display: none; }
}

/* Die Hobbywetten bei Skarn standen hier bis zum 17.09.2026 mit eigenem
   Balken, eigener Sperrzeile und eigener Liste, wer gesetzt hat. Seit #690
   stehen sie auf einer tc-kreidetafel (Balken, Grund, Wettende: kreide.css). */

/* Angesprungen aus einer Erwaehnungsmeldung (`?target=baustelle&wunsch=`,
   #636) — nach dem Scrollen weiss man sonst nicht, welcher Wunsch gemeint
   war. Kurz, dann wieder normal: Eine dauerhafte Hervorhebung waere beim
   naechsten Blick ein Raetsel. Skarns Tafel hat ihre Fassung davon in
   kreide.css (`.tc-kreidetafel__ereignis.ist-gemeint`). */
/* ⚠️ SEIT #727 GILT DIE HERVORHEBUNG AUCH FUER STECKBRIEF UND PRANGER.
   Die sechs Kopfgeld-Meldungen tragen `?bounty=<id>`, und ohne diese Regel
   waere der Sprung stumm: Die Seite scrollt, und nichts sagt, welche der
   Zeilen gemeint war. Eine Klasse ohne Regel faellt nicht auf, sie sieht
   nur nach nichts aus (CLAUDE.md §10). */
.ug-wunsch.ist-gemeint,
.ug-steckbrief.ist-gemeint,
.ug-pranger.ist-gemeint {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 3px;
  transition: outline-color 1.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ug-wunsch.ist-gemeint,
  .ug-steckbrief.ist-gemeint,
  .ug-pranger.ist-gemeint { transition-duration: 0.01ms; }
}

/* --- Skarns Haus: Anordnung im Raum (#690) --------------------------------
   Nur Abstaende. Aussehen und Zustaende bringen die Bausteine mit. */
.ug-skarn-haus,
.ug-skarn-tafeln {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-4, 16px);
  margin-bottom: var(--tc-space-5, 24px);
}
.ug-skarn-aktion { margin-top: var(--tc-space-3, 12px); }
#ug-tuer-moment { margin-bottom: var(--tc-space-4, 16px); }

/* Skarns Räume (#698). Der Schankraum zeigt oben die Scheine, darunter drei
   Türen (tc-door mit Bild), dahinter liegen Partien, Hobbyziele und Rennbahn.
   Die Notizen über abgerechnete Scheine sind zugeklappt wie der Umtauschbeleg
   im Tresor (.ug-beleg). */
#ug-deckel-platz:not(:empty) { margin-bottom: var(--tc-space-3, 12px); }
.ug-skarn-notizen { margin-top: var(--tc-space-4, 16px); }
.ug-skarn-notizen__titel {
  font-family: Cinzel, serif;
  font-size: 0.95rem;
  color: var(--tc-highlight);
}
.ug-skarn-raumkopf {
  margin: 0 0 var(--tc-space-4, 16px);
  padding-bottom: var(--tc-space-2, 8px);
  border-bottom: 1px solid var(--tc-deco-warm-border);
  /* Die Kassenleiste klebt oben; ohne Abstand stünde der Kopf beim Betreten
     eines Raums darunter. */
  scroll-margin-top: 84px;
}
.ug-skarn-raumkopf__titel {
  margin: 0;
  font-family: Cinzel, serif;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--tc-highlight);
}

/* Der Deckel (#692). Oben ueber den Tafeln steht er als Schein; scrollt er aus
   dem Bild, liegt er als Leiste am unteren Rand (tc-wettschein--leiste, die
   Seite positioniert sie — library-community.html#skarns-haus).
   ⚠️ `[hidden]` verliert gegen das `display: flex` der Komponente (dieselbe
   Falle wie beim Geburtstagskuchen) — die Zeile darunter ist Pflicht. */
.ug-deckel { margin-bottom: 0; }
.ug-deckel-leiste {
  position: fixed;
  left: calc(var(--tc-space-3, 12px) + var(--tc-safe-left, 0px));
  right: calc(var(--tc-space-3, 12px) + var(--tc-safe-right, 0px));
  bottom: calc(var(--tc-space-3, 12px) + var(--tc-safe-bottom, 0px));
  z-index: var(--tc-z-fixed, 1200);
  max-width: 560px;
  margin-inline: auto;
}
.ug-deckel-leiste[hidden] { display: none; }
/* Unten muss Platz bleiben, sonst deckt die Leiste die letzten Scheine ab. */
#ug-deckel-leiste-platz:not(:empty) { height: 72px; }

/* Deine Ratte (#691): Karte, dann Renntag und Stall als zwei Szenen
   nebeneinander (#711, tc-rr-szenen), darunter der letzte Renntag.
   Auch hier nur Abstaende — die Bausteine stehen in rattenrennen.css. */
.ug-ratte {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-3, 12px);
}
.ug-ratte > .ug-abschnitt__titel,
.ug-ratte .tc-rr-szene > .ug-abschnitt__titel { margin-bottom: 0; }
/* Skarns Zucht unter der Karte (#697); das Fenster dazu öffnet auch der
   Knopf „Bearbeiten" an der Karte. */
.ug-ratte__zucht {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-2, 8px) var(--tc-space-3, 12px);
  margin: 0;
  font-size: var(--tc-text-sm, 0.82rem);
  line-height: 1.45;
  color: var(--tc-text-muted);
}
.ug-ratte__zucht > span { flex: 1 1 240px; min-width: 0; }
.ug-ratte-bearbeiten {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-3, 12px);
}

/* ============================================================================
   DIE KOPFGELDTAFEL UND DER PRANGER (15.08.2026)
   ----------------------------------------------------------------------------
   Der Steckbrief sieht nach PAPIER aus — überall sonst ist es Stein, Holz und
   Kerzenlicht. Das ist Absicht: Ein Aushang unterscheidet sich vom Ort, an
   dem er hängt, sonst liest ihn niemand. (Seit dem 17.09.2026 ist er nicht
   mehr der einzige: Skarns Wettscheine sind ebenfalls Papier, tc-wettschein,
   von Tim abgenommen. Beide sind Gegenstände, die man in die Hand nimmt.)

   Der leichte Winkel kommt aus dem Index, nicht aus Zufall: `Math.random()`
   würde bei jedem Zeichnen anders ausfallen, und eine Wand, die bei jedem
   Blick anders hängt, wirkt kaputt statt lebendig.
   ========================================================================== */

.ug-abschnitt__zahl {
  margin-left: var(--tc-space-2, 8px);
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--tc-bg-surface-3, #3a3a3a);
  font-family: var(--tc-font-body, inherit);
  font-size: 0.78rem;
  color: var(--tc-text-muted, #9e9e9e);
}

.ug-tafel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tc-space-4, 16px);
}

@media (min-width: 700px) {
  .ug-tafel { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

.ug-steckbrief {
  position: relative;
  padding: var(--tc-space-4, 16px) var(--tc-space-4, 16px) var(--tc-space-5, 20px);
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 2px;
  /* Vergilbtes Papier — eine Datenfarbe ist das nicht, aber auch kein Theme:
     Der Steckbrief soll in JEDEM Theme nach Papier aussehen. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0, 0, 0, 0.28), transparent 60%),
    linear-gradient(175deg, #d9c9a3, #c3b28c 60%, #b6a37c);
  color: #23190f;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transform: rotate(-0.5deg);
}

.ug-steckbrief:nth-child(even) { transform: rotate(0.6deg); }
.ug-steckbrief:nth-child(3n)   { transform: rotate(-0.2deg); }

/* Der Nagel. Ein Element weniger im Markup, weil es Dekor ist. */
.ug-steckbrief::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8d8d8d, #2b2b2b 70%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.ug-steckbrief.ist-meins { outline: 2px solid var(--tc-highlight, #e8cf9a); outline-offset: 2px; }

.ug-steckbrief__kopf {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2, 8px);
  margin-bottom: var(--tc-space-3, 12px);
  padding-top: 6px;
  font-size: 0.76rem;
  color: #4a3a26;
}

.ug-steckbrief__system { font-size: 1rem; }
.ug-steckbrief__alter  { margin-left: auto; font-style: italic; opacity: 0.8; }

.ug-steckbrief__ziel {
  margin: 0 0 4px;
  font-family: var(--tc-font-display, Cinzel, serif);
  font-size: 1.25rem;
  line-height: 1.2;
  color: #1a1209;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.ug-steckbrief__was    { margin: 0 0 var(--tc-space-3, 12px); font-size: 0.82rem; color: #4a3a26; }
.ug-steckbrief__zusatz { margin: 0 0 6px; font-size: 0.8rem; font-style: italic; color: #4a3a26; }

.ug-steckbrief__lohn {
  margin: 0 0 var(--tc-space-2, 8px);
  padding: 6px 0;
  border-top: 1px solid rgba(35, 25, 15, 0.25);
  border-bottom: 1px solid rgba(35, 25, 15, 0.25);
  font-family: var(--tc-font-display, Cinzel, serif);
  font-size: 1rem;
  color: #23190f;
}

.ug-steckbrief__lohn span { font-family: var(--tc-font-body, inherit); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
.ug-steckbrief__von       { margin: 0 0 var(--tc-space-2, 8px); font-size: 0.78rem; color: #4a3a26; }

/* Der Knopf auf Papier braucht eigene Farben — die Geisterfassung ist fuer
   dunkle Flaechen gedacht und waere hier fast unsichtbar. */
.ug-steckbrief .tc-button {
  border-color: rgba(35, 25, 15, 0.45);
  color: #23190f;
  background: rgba(255, 255, 255, 0.18);
}

.ug-steckbrief .tc-button:hover { background: rgba(255, 255, 255, 0.32); }

/* --- Eingeloest: der Zwischenzustand, den vorher niemand sah -------------- */

.ug-eingeloest {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3, 12px);
  flex-wrap: wrap;
  padding: var(--tc-space-3, 12px);
  margin-bottom: var(--tc-space-2, 8px);
  border: 1px solid var(--tc-success, #4ade80);
  border-radius: var(--tc-radius-md, 8px);
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), transparent 70%),
              var(--tc-bg-surface-2, #2d2d2d);
}

.ug-eingeloest__marke { font-size: 1.2rem; color: var(--tc-success, #4ade80); }
.ug-eingeloest p      { margin: 0; flex: 1 1 200px; font-size: 0.88rem; color: var(--tc-text-default, #b0b0b0); }
.ug-eingeloest strong { color: var(--tc-text-strong, #e0e0e0); }

/* --- Der Pranger ---------------------------------------------------------- */

.ug-pranger {
  padding: var(--tc-space-4, 16px);
  margin-bottom: var(--tc-space-3, 12px);
  border: 1px solid var(--tc-border-subtle, rgba(255, 255, 255, 0.1));
  border-left: 3px solid var(--tc-warning, #fbbf24);
  border-radius: var(--tc-radius-md, 8px);
  background: var(--tc-bg-surface-2, #2d2d2d);
}

/* Wer selbst dort steht, soll es sofort sehen — und nicht erst den Namen
   lesen muessen. */
.ug-pranger.ist-ich {
  border-left-color: var(--tc-danger, #ef4444);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), transparent 60%),
              var(--tc-bg-surface-2, #2d2d2d);
}

.ug-pranger__kopf   { display: flex; gap: var(--tc-space-3, 12px); align-items: flex-start; }
.ug-pranger__pfahl  { font-size: 1.6rem; line-height: 1; }
.ug-pranger__wer    { margin: 0; font-family: var(--tc-font-display, Cinzel, serif); font-size: 1.1rem; color: var(--tc-text-strong, #e0e0e0); }
.ug-pranger__was    { margin: 2px 0 0; font-size: 0.88rem; color: var(--tc-text-default, #b0b0b0); }
.ug-pranger__was strong { color: var(--tc-highlight, #e8cf9a); }
.ug-pranger__wofuer { margin: 4px 0 0; font-size: 0.78rem; color: var(--tc-text-muted, #9e9e9e); }

.ug-pranger__hinweis {
  margin: var(--tc-space-3, 12px) 0 var(--tc-space-2, 8px);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--tc-text-default, #b0b0b0);
}

.ug-pranger .tc-button { margin-top: var(--tc-space-2, 8px); }

/* ============================================================================
 * DIE GROSSANSICHT EINES WIRTS (15.08.2026)
 * ----------------------------------------------------------------------------
 * Tim: "ich wuerde mir wuenschen, dass man die Bilder der Wirte irgendwo auch
 * groesser sehen kann."
 *
 * Das Portrait im Raum ist ein 150px-Kreis; die Datei dahinter hat 2048px.
 * Hier laeuft dasselbe Bild quadratisch und randlos, so gross wie das Fenster
 * es zulaesst.
 * ========================================================================== */

/* Der Rahmen im Raum ist jetzt ein <button> (Tastaturbedienung). Ein Button
   bringt Browser-Gestaltung mit — Rand, Hintergrund, Innenabstand, eigene
   Schrift —, und die wuerde den Kreis zerlegen. Deshalb hier zuruecksetzen,
   statt am Markup zu sparen. */


/* Die Lupe erscheint erst bei Zeiger oder Fokus — dauerhaft sichtbar laege
   sie als Symbol auf jedem der acht Gesichter. */


/* Auf Touch gibt es kein Hover — dort steht die Lupe fest, sonst gaebe es
   keinen Hinweis darauf, dass das Bild ueberhaupt anklickbar ist. */


/* `aspect-ratio` am Medium, nicht am Rahmen: Das Video ist 16:9, das WebP
   quadratisch. Ohne feste Form spraenge das Fenster in der Hoehe, sobald das
   Video das poster abloest. */


/* ============================================================================
   GORBOS BUCH: DER SAISONSTRICH (20.08.2026)
   ----------------------------------------------------------------------------
   Tim: „In Gorbos Tabelle sollte je nach Saison ein sichtbarer Cut sein."
   Das Buch lief als eine einzige Liste durch — ein Eintrag vom Juni stand
   ohne Trennung neben einem von gestern, obwohl dazwischen eine Waehrung
   gewechselt hat.
   ========================================================================== */
.ug-buch__cut {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 6px;
  padding: 6px 0 4px;
  border-top: 1px solid var(--tc-border-subtle);
  font-family: Cinzel, serif;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
  list-style: none;
}

.ug-buch__cut:first-child { margin-top: 0; border-top: 0; }
.ug-buch__cut-titel { color: var(--tc-highlight); }

.ug-buch__cut-note {
  margin-left: auto;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.72rem;
}

/* Die Schmelze ist die Buchung, die den Abschnitt beendet — sie darf sich von
   einer gewoehnlichen Ausgabe abheben. Rostrot wie Grubbs Stempel: eine
   Entscheidung der Plattform, kein Fehler des Spielers. */
.ug-buch__zeile--schmelze {
  border-left: 3px solid #a4553c;
  padding-left: 9px;
  background: rgba(164, 85, 60, 0.07);
}

/* ----------------------------------------------------------------------------
   EHRENTITEL
   ----------------------------------------------------------------------------
   ⚠️ Sie wurden seit der Muenzschmelze an `player.gamification.ehrentitel`
   geschrieben und hatten projektweit NULL Leser — sichtbar war nur die Liste
   aus der Schmelz-Antwort, im Umtauschbeleg und beim Ausrufer. Fuer einen
   Titel, der „nie wieder vergeben wird", ist das die schlechteste denkbare
   Umsetzung: Er existiert, und niemand kann ihn ansehen.
   -------------------------------------------------------------------------- */
.ug-ehrentitel { list-style: none; margin: 0; padding: 0; }

.ug-ehrentitel__zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--tc-accent);
  border-radius: var(--tc-radius-md);
  background: rgba(201, 169, 89, 0.07);
}

.ug-ehrentitel__zeile + .ug-ehrentitel__zeile { margin-top: 8px; }

.ug-ehrentitel__marke { font-size: 1.2rem; line-height: 1; }

.ug-ehrentitel__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ug-ehrentitel__text strong { color: var(--tc-highlight); }
.ug-ehrentitel__was { font-size: 0.8rem; color: var(--tc-text-muted); }

.ug-ehrentitel__wert {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--tc-text-muted);
  white-space: nowrap;
}

/* Grubbs Ablehnen-Knopf. Er steht neben zustimmenden Knoepfen und darf nicht
   wie einer aussehen — aber auch nicht wie eine Warnung: Niemand verliert
   dabei etwas (Briefing 7.4, Schutzregel 2). */
.tc-button.ug-knopf--ablehnen {
  border-color: #a4553c;
  color: #c4785c;
  background: transparent;
}

.tc-button.ug-knopf--ablehnen:hover { background: rgba(164, 85, 60, 0.12); }

/* ======================================================================
   DER SCHANDBRIEF — die Blätter an der Wand (23.08.2026)
   ----------------------------------------------------------------------
   Tim: „Es gab gegen die Schandnamen mal so Optionen wie ‚Schläger
   losschicken', ‚Anwalt beauftragen' […] Die sind jetzt thematisch nicht
   ganz passend."

   Der Raum zeigt seit heute zwei Listen: was über einem selbst hängt (mit
   den beiden Gegenmitteln) und was in der Stadt sonst noch hängt. Beide
   benutzen denselben Zettel.

   Eigene ug-Klassen statt .ug-wunsch: Dessen Modifier tragen Bedeutungen
   aus dem Bauplatz-Rennen (führt / wird gebaut / abgelehnt). Ein Zettel
   mit `--fuehrt`-Glimmen wäre eine Aussage, die es hier nicht gibt.
   Die Knöpfe darin sind tc-button — die Library liefert das Atom, ug-*
   nur die Anordnung. ====================================================*/

.ug-schand {
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--tc-border-color);
  border-left: 3px solid var(--tc-border-color);
  border-radius: var(--tc-radius-md, 10px);
  background: var(--tc-bg-surface-2);
}

/* Das eigene Blatt hebt sich ab — es ist das einzige, an dem man etwas tun
   kann. Kante statt Textfarbe: --tc-accent färbt nirgends Schrift (§9). */
.ug-schand--meiner {
  border-left-color: var(--tc-accent);
  background: linear-gradient(90deg, var(--tc-accent-glow), transparent 55%),
              var(--tc-bg-surface-2);
}

.ug-schand__name {
  font-family: var(--tc-font-display, Cinzel, serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tc-highlight);
  line-height: 1.3;
}

.ug-schand__meta {
  margin-top: 3px;
  font-size: 0.82rem;
  color: var(--tc-text-muted);
  line-height: 1.45;
}

.ug-schand__meta a { color: var(--tc-text-default); }
.ug-schand__meta a:hover { color: var(--tc-highlight); }

.ug-schand__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Der kostenlose Weg steht bewusst UNTER den bezahlten und kleiner: Er ist
   die bessere Antwort, aber keine, die man sofort einlösen kann. */
.ug-schand__gratis {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--tc-text-muted);
  font-style: italic;
}

/* Der dritte Ausweg: aussitzen (#498, 12.09.2026). Er steht UNTER den
   beiden anderen und nicht als vierter Knopf daneben — es ist kein Kauf,
   sondern das Gegenteil davon. Deshalb dieselbe leise Zeile wie der
   Kampf-Hinweis, nur ohne Kursive: Die Zahl darin ist eine Auskunft, keine
   Randbemerkung, und `--tc-highlight` am `strong` hebt genau sie heraus. */
.ug-schand__aussitzen {
  margin: 4px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--tc-text-muted);
}
.ug-schand__aussitzen strong { color: var(--tc-highlight); font-weight: 700; }

/* Unter 480px stehen die beiden Knöpfe untereinander statt gequetscht
   nebeneinander — sie tragen Preis UND Beschriftung. */
@media (max-width: 480px) {
  .ug-schand__aktionen { flex-direction: column; align-items: stretch; }
  .ug-schand__aktionen .tc-button { width: 100%; }
}

/* Unsignierter Brief — der Flüsterer nennt den Namen nur gegen Gold. */
.ug-schand__stifter--anonym {
  color: var(--tc-text-muted);
  font-style: italic;
  border-bottom: 1px dotted var(--tc-text-muted);
  cursor: help;
}

/* Mitlachen: der einzige Zug hier, der nichts kostet. Deshalb bewusst
   zurückhaltend — er soll neben den bezahlten Knöpfen nicht wie einer
   aussehen. Gezählt wird nur, wie viele; nie, wer. */
.ug-schand__lachen { opacity: 0.75; }
.ug-schand__lachen:hover { opacity: 1; }

.ug-schand__lachen.is-aktiv {
  opacity: 1;
  border-color: var(--tc-accent);
  background: var(--tc-accent-glow);
}

.ug-schand__lachen-zahl:not(:empty) {
  display: inline-block;
  min-width: 1.4em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--tc-highlight);
}

.ug-schand-ehre {
  margin: 0;
  padding-left: 20px;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--tc-text-default);
}

/* ============================================================================
 * DER STADTSCHREIER — untergrund-termine.html (04.09.2026, Taskwerk #557 B)
 * ----------------------------------------------------------------------------
 * ⚠️ HIER STEHT NUR DAS ZUSAMMENSETZEN, KEINE KOMPONENTE. Die Terminkarte,
 * die Systemmarke, der Ruf und die stillen Abende sind `tc-*` aus
 * css/components/termin.css (abgenommen am 04.09.2026, demonstriert in
 * library-termine.html). Der Umschalter ist `tc-tabs--pills`, der Wirt
 * `tc-wirt`. Was hier steht, ist die Anordnung im Raum — und nur die.
 * ========================================================================== */

.schreier-laedt {
  color: var(--tc-text-muted);
  font-style: italic;
  padding: var(--tc-space-6, 24px) 0;
}

/* Werkzeugleiste: Umschalter links, Systemfilter daneben. Beide sind
   `tc-tabs--pills`; getrennt bleiben sie, weil sie verschiedene Fragen
   stellen — „welche Ansicht" und „welches System". */
.schreier-werkzeug {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-3, 12px);
  align-items: center;
  margin: var(--tc-space-5, 20px) 0 var(--tc-space-4, 16px);
}

/* Der Farbpunkt am Systemfilter. `--tc-sys` kommt aus termin.css, das die
   sechs `[data-system="…"]`-Zeilen setzt — hier wird nur gelesen. */
.schreier-punkt {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tc-sys, var(--tc-text-muted));
  flex: 0 0 auto;
  margin-right: 2px;
}

.schreier-liste { display: block; }

/* WEITER VORAUS — was selten gebraucht wird, wird kleiner (05.09.2026)
   ---------------------------------------------------------------------------
   Bis dahin schnitt die Liste nach sechs Abenden ab. Damit verschwanden
   ganze SYSTEME: Die Filterleiste zaehlte „Old World 2", die Liste zeigte
   null davon, und man musste erst filtern, um sie ueberhaupt zu sehen.
   Tim: „Das ist kein gelerntes Verhalten."

   Die Trennzeile sagt, dass jetzt etwas anderes kommt — ohne sie liest sich
   der Groessensprung wie ein Fehler. */
.schreier-voraus {
  display: flex;
  align-items: baseline;
  gap: var(--tc-space-3, 12px);
  margin: var(--tc-space-5, 20px) 0 var(--tc-space-2, 8px);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--tc-border-subtle);
}
.schreier-voraus__wort {
  font-family: var(--tc-font-display, Cinzel, serif);
  font-size: 0.94rem;
  letter-spacing: 0.04em;
  color: var(--tc-highlight);
}
.schreier-voraus__zahl {
  font-size: 0.8rem;
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ⚠️ DIE ZEILEN STEHEN ENGER ALS DIE KARTEN. `termin.css` gibt jeder
   Folgekarte 10px Abstand — bei sechzehn Zeilen sind das 160px Luft in einer
   Liste, die gerade deshalb kompakt sein soll. */
.schreier-liste--knapp .tc-termin + .tc-termin { margin-top: 4px; }


.schreier-monat__kopf {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3, 12px);
  margin-bottom: var(--tc-space-3, 12px);
}
.schreier-monat__label {
  font-family: var(--tc-font-display, Cinzel, serif);
  font-size: 1.1rem;
  color: var(--tc-highlight);
  font-variant-numeric: tabular-nums;
}

/* Der aufgeklappte Tag aus dem Monatsraster (04.09.2026). Er steht UNTER
   dem Raster: In einer Zelle von rund 50px Breite ist kein Platz fuer einen
   Titel, und ein Fenster darueber verdeckt genau den Monat, in dem man sich
   gerade orientiert. */
.schreier-tag {
  margin-top: var(--tc-space-3, 12px);
  padding-top: var(--tc-space-3, 12px);
  border-top: 1px solid var(--tc-border-subtle);
}
.schreier-tag__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-2, 8px);
  margin-bottom: var(--tc-space-2, 8px);
  font-size: 0.86rem;
  color: var(--tc-text-muted);
}
.schreier-tag__kopf strong { color: var(--tc-highlight); }

/* Die Nebenzeilen im aufgeklappten Tag: Veranstaltung, Stichtag, wer nicht
   kann. Bewusst SCHMALER als eine Terminkarte — sie sind Randnotizen zum
   Tag, keine Verabredungen, und eine Karte in gleicher Groesse haette das
   Gegenteil behauptet. */
.schreier-neben {
  display: flex;
  align-items: flex-start;
  gap: var(--tc-space-2, 8px);
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: var(--tc-radius-sm, 6px);
  background: var(--tc-bg-surface-1);
  border-left: 2px solid var(--tc-border-subtle);
  font-size: 0.82rem;
  color: var(--tc-text-default);
  line-height: 1.4;
}
.schreier-neben > span:nth-child(2) { flex: 1; min-width: 0; }
.schreier-neben__zeichen { font-size: 0.95rem; line-height: 1.3; }
.schreier-neben__zeit { color: var(--tc-text-muted); font-size: 0.76rem; }
.schreier-neben strong { color: var(--tc-text-strong); font-weight: 600; }
.schreier-neben--com  { border-left-color: var(--tc-highlight); }
/* Ein Stichtag draengt — deshalb warm. Eine Abwesenheit ist eine Auskunft,
   keine Frist: Sie bleibt grau. */
.schreier-neben--ziel { border-left-color: var(--tc-warning); }
.schreier-neben--abw  { opacity: 0.85; }

/* ⚠️ DIE KLASSE HATTE KEINE EINZIGE REGEL (bis 04.09.2026). `.ug-zurueck`
   steht auf DREI Untergrund-Seiten (Termine, Album, Kladde) und war nie
   definiert — der Link erbte, was gerade vererbt wurde. Tim: „Das wirkt noch
   ungestyled und die Abstände stimmen nicht."

   Vierter Fall dieser Klasse an einem Tag, nach `.btn-outline` (26 Knöpfe im
   Dashboard), `.tc-subhead` und `tc-game-result__name`: Eine Klasse ohne
   Regel faellt nicht auf, sie sieht nur nach nichts aus (§10). */
.ug-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 36px Trefferflaeche, auch wenn der Text kleiner ist (Heuristik 5) —
     es ist der einzige Weg zurueck. */
  min-height: 36px;
  margin-bottom: var(--tc-space-3, 12px);
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: 0.92rem;
  color: var(--tc-text-muted);
  text-decoration: none;
  transition: color var(--tc-motion-fast, 120ms) ease;
}
.ug-zurueck:hover { color: var(--tc-highlight); }
.ug-zurueck:focus-visible {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Der Raum beginnt mit dem Wirt — er braucht Luft zur Navigation darueber.
   `.tc-page` gibt 16px Innenabstand, das ist fuer eine Seite richtig und
   fuer einen Raum mit Portraitkopf zu wenig. */
#schreier-root { padding-top: var(--tc-space-5, 20px); }

/* Die Rueckschau — zugeklappt, aber mit der Zahl im Deckel. Sie steht unter
   der Liste und ueber der Saison: erst was ansteht, dann was war, dann die
   Bilanz. */
.schreier-rueck {
  margin-top: var(--tc-space-4, 16px);
  border-top: 1px solid var(--tc-border-subtle);
  padding-top: var(--tc-space-3, 12px);
}
.schreier-rueck__kopf {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2, 8px);
  cursor: pointer;
  list-style: none;
  font-size: 0.88rem;
  color: var(--tc-text-default);
  /* ⚠️ 36px, auch wenn der Text kleiner ist: Ein <summary> ist ein
     Hit-Target wie jeder Knopf (Heuristik 5). */
  min-height: 36px;
}
.schreier-rueck__kopf::-webkit-details-marker { display: none; }
.schreier-rueck__kopf::before {
  content: '\25B8';
  color: var(--tc-text-muted);
  transition: transform var(--tc-motion-fast, 120ms) ease;
}
.schreier-rueck[open] .schreier-rueck__kopf::before { transform: rotate(90deg); }
.schreier-rueck__zahl {
  margin-left: auto;
  font-size: 0.76rem;
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
}
.schreier-rueck__liste { margin-top: var(--tc-space-2, 8px); }
.schreier-rueck__zeile {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: var(--tc-space-2, 8px);
  padding: 8px 10px;
  border-radius: var(--tc-radius-sm, 6px);
  font-size: 0.8rem;
  color: var(--tc-text-default);
  text-decoration: none;
  min-height: 36px;
}
.schreier-rueck__zeile:hover { background: rgba(255, 255, 255, 0.04); }
.schreier-rueck__datum {
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.schreier-rueck__titel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schreier-rueck__stand { font-size: 0.72rem; color: var(--tc-text-muted); white-space: nowrap; }
/* Nur der offene Zustand faellt auf — er ist der einzige, der etwas von
   einem will. „abgeschlossen" ist eine Auskunft, keine Aufgabe. */
.schreier-rueck__zeile[data-stand="offen"] .schreier-rueck__stand { color: var(--tc-warning); }
.schreier-rueck__zeile[data-stand="aus"] { opacity: 0.6; }
.schreier-rueck__zeile[data-stand="aus"] .schreier-rueck__titel { text-decoration: line-through; }

@media (max-width: 480px) {
  /* Bei 375px passen Datum, Titel und Stand nicht in eine Zeile — der Stand
     rutscht unter den Titel, das Datum bleibt links stehen. */
  .schreier-rueck__zeile { grid-template-columns: 58px 1fr; }
  .schreier-rueck__stand { grid-column: 2; }
}

/* Handeln steht UNTEN, nicht oben. Wer den Raum betritt, will zuerst wissen,
   was ansteht — nicht, was er anlegen kann (#495: „Kalender gehoert nicht in
   die Knopfreihe, das ist Navigation"). */
.schreier-handeln {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-2, 8px);
  margin-top: var(--tc-space-6, 24px);
  padding-top: var(--tc-space-4, 16px);
  border-top: 1px solid var(--tc-border-subtle);
}

@media (max-width: 620px) {
  .schreier-werkzeug { gap: var(--tc-space-2, 8px); }
  /* ⚠️ HIER SCROLLTE DIE FILTERLEISTE QUER (bis 04.09.2026). Der Gedanke war,
     Platz zu sparen: Sieben Chips waeren auf 375px drei Zeilen, und der erste
     Termin ruesche unter die Falz.

     Tim am 04.09.2026, nach dem mobilen Screenshot: „Umbrechen. Was man nicht
     sieht, wird nicht geklickt."

     Er hat recht, und das Argument schlaegt das Platzargument: Eine Leiste,
     die rechts abgeschnitten ist, verschweigt zwei Systeme vollstaendig —
     genau die Sorte stiller Auslassung, die heute schon einmal zwei
     Fehldiagnosen erzeugt hat (der abgewaehlte Blood-Bowl-Filter im
     Dashboard). Gespart wird stattdessen an den Chips selbst: kompakter
     Innenabstand, kleinere Schrift, kein Zaehler-Abstand. */
  .schreier-werkzeug .tc-tabs--wrap { flex-wrap: wrap; }
  .schreier-werkzeug .tc-tab {
    padding: 5px 10px;
    font-size: 0.78rem;
  }
  .schreier-handeln .tc-button { flex: 1 1 auto; }
}




/* ===========================================================================
   DER TERMINRAUM AUF DEM SCHREIBTISCH (05.09.2026)
   ---------------------------------------------------------------------------
   Tim: „Auf Desktop wirkt die lieblos. Der Platz ist nicht gut genutzt und es
   sieht sehr langweilig aus."

   Gemessen bei 1920px, bevor etwas geaendert wurde: acht Abschnitte
   untereinander ueber 1550px Breite, die Terminkarten 1550x177 — ihre
   Mittelspalte hielt 1296px fuer Text, der 400 braucht. Rechts davon lagen
   rund 900px Nichts, und der Zusage-Knopf klebte allein am Rand.

   Der Raum war fuer 375px gebaut und auf dem Schreibtisch nur breitgezogen.
   =========================================================================== */

/* Bis 1099px bleibt alles wie es war — ein Block unter dem anderen. */
.schreier-spalten { display: block; }

@media (min-width: 1100px) {
  .schreier-spalten {
    display: grid;
    /* ⚠️ `minmax(0, 1fr)`, nicht `1fr`: Ein Grid-Kind hat `min-width: auto`
       und schrumpft nicht unter seinen Inhalt. Die Terminkarten haben lange
       Titel — ohne die 0 waere die Hauptspalte breiter geworden als ihr
       Anteil und haette die Seitenspalte zusammengedrueckt. */
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: var(--tc-space-6, 24px);
    align-items: start;
  }

  /* ⚠️ Die Seitenspalte klebt beim Scrollen NICHT (kein `position: sticky`).
     Sie ist mit Handeln, Saison und Rueckschau hoeher als mancher Bildschirm;
     eine klebende Spalte, die selbst gescrollt werden muss, ist schlechter
     als eine, die mitlaeuft. */
  .schreier-seite {
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-4, 16px);
  }

  /* Die Knoepfe stehen in der schmalen Spalte untereinander statt nebeneinander
     — vier Knoepfe in 340px waeren vier Zeilen mit je einem Wortfragment. */
  .schreier-seite .schreier-handeln {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0;
  }
  .schreier-seite .schreier-handeln .tc-button {
    width: 100%;
    /* ⚠️ LINKSBUENDIG, NICHT ZENTRIERT. Nebeneinander ist ein zentrierter
       Knopf richtig; untereinander in einer Spalte ergeben vier zentrierte
       Beschriftungen eine Zickzacklinie, und der Blick findet keinen Anfang. */
    justify-content: flex-start;
    text-align: left;
  }
  /* ⚠️ EIN GHOST-KNOPF HAT KEINEN SICHTBAREN RAND — nebeneinander in einer
     Leiste ist das richtig (der primaere traegt die Farbe, die anderen sind
     Nebenwege). Untereinander in einer eigenen Spalte sah die Folge aus wie
     eine Liste aus Text: drei Zeilen ohne erkennbare Trefferflaeche. Hier
     bekommen sie eine, ohne zum zweiten Primaerknopf zu werden. */
  .schreier-seite .schreier-handeln .tc-button--ghost {
    border-color: var(--tc-border-subtle);
    background: rgba(255, 255, 255, 0.02);
  }
  .schreier-seite .schreier-handeln .tc-button--ghost:hover {
    border-color: var(--tc-border-strong);
    background: rgba(255, 255, 255, 0.05);
  }

  /* Saison und Rueckschau bringen eigene Abstaende mit, die auf eine Spalte
     unter der Liste gemuenzt waren. In der Seitenspalte regelt das der gap. */
  .schreier-seite .tc-saison,
  .schreier-seite .schreier-rueck { margin: 0; }

  /* ⚠️ DER WIRT IST HIER DER HAUSHERR, NICHT DER ABSENDER EINER SEKTION.
     `--kompakt` (56px) ist fuer die Werkbank-Karte im Dashboard gedacht, wo
     er zwischen anderen Abschnitten sitzt. Im eigenen Raum, auf einem
     Bildschirm mit Platz, darf er groesser sein — die Komponente bleibt
     unangetastet, nur ihre Groesse im Raum-Kontext waechst. */
  #schreier-root .tc-wirt--kompakt {
    gap: 18px;
    margin-bottom: 20px;
  }
  #schreier-root .tc-wirt--kompakt .tc-wirt__portrait {
    width: 84px;
    height: 84px;
  }
  #schreier-root .tc-wirt--kompakt .tc-wirt__name { font-size: 1.24rem; }
}


/* ⚠️ ZWEI KARTEN NEBENEINANDER — ERST AB 1500px, und die Zahl ist gerechnet,
   nicht gewaehlt. Die Karte ist ein Grid `62px | 1fr | auto`: Datumsblock,
   Mitte, Zusage-Knopf (gemessen 127px). Unter etwa 560px Kartenbreite bleiben
   der Mitte keine 370px mehr, und der Titel bricht neben dem Logo um.

   1500px Fenster − 2×185px Seitenrand − 340px Seitenspalte − 24px Spalte
   = 566px je Karte bei zwei Spalten. Darunter bleibt es einspaltig; eine
   zu schmale Karte waere schlechter als eine zu breite.

   Der Gewinn ist die Hoehe: Bei sechs Terminen war die Liste 1262px hoch und
   die Seitenspalte 331 — rechts unten lag eine Leere, so hoch wie drei
   Karten. */
@media (min-width: 1500px) {
  .schreier-haupt .schreier-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tc-space-3, 12px);
    align-items: start;
  }
  /* ⚠️ DIE KNAPPE LISTE BLEIBT EINSPALTIG. Eine Zeile ist 46px hoch; zwei
     nebeneinander in je 566px waeren zwei fast leere Balken. Der Sinn der
     Variante ist die Hoehe, nicht die Breite. */
  .schreier-haupt .schreier-liste--knapp {
    display: block;
  }
  /* ⚠️ `.tc-termin + .tc-termin { margin-top: 10px }` (termin.css:401) gilt
     fuer die LISTE — im Raster setzt es jede Karte ausser der ersten um 10px
     nach unten, und die erste Reihe stand gemessen bei 369px und 379px.
     Sichtbar war das als leichte Treppe, nicht als Fehler; den Abstand
     regelt hier der `gap`. */
  .schreier-haupt .schreier-liste .tc-termin + .tc-termin { margin-top: 0; }

  /* ⚠️ GLEICH HOHE KARTEN JE REIHE. Mit `align-items: start` behaelt jede
     Karte ihre Inhaltshoehe — gemessen 207px neben 177px, sobald eine Karte
     eine zweite Teilnehmerzeile hat (der Blood-Bowl-Abend mit sechs Namen).
     Die Unterkante der Reihe springt dann, und die naechste Reihe beginnt
     erst unter der hoeheren. `stretch` zieht beide auf dieselbe Hoehe; der
     Inhalt bleibt oben, weil die Karte selbst ihre Spalten oben ausrichtet. */
  .schreier-haupt .schreier-liste { align-items: stretch; }

  /* ⚠️ DER ZUSAGE-KNOPF SCHWEBTE. Die rechte Spalte ist 66px hoch (Stand +
     Knopf) und stand oben in einer 177px-Karte — darunter lagen 83px Leere,
     und der Knopf saß auf Hoehe der Titelzeile statt an einer Kante. Jetzt
     traegt die Spalte die volle Hoehe: der Stand oben, der Knopf unten. Damit
     liegen beide auf einer Linie mit dem, was links daneben steht. */
  .schreier-haupt .schreier-liste .tc-termin { align-items: stretch; }
  .schreier-haupt .schreier-liste .tc-termin__rechts {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--tc-space-2, 8px);
  }
}

@media (min-width: 1100px) {
  /* Die Rueckschau ist ein zugeklapptes <details> und stand als duenne Zeile
     ohne Flaeche unter der Saison-Karte — in einer Spalte aus Kaesten sieht
     das aus, als sei sie herausgefallen. Sie bekommt denselben Rahmen; ein
     eigener waere eine zweite Antwort darauf, wie ein Kasten hier aussieht. */
  .schreier-seite .schreier-rueck {
    padding: 10px 14px;
    border: 1px solid var(--tc-border-subtle);
    border-radius: var(--tc-radius-md);
    background: var(--tc-bg-surface-1);
  }
}