/* ===========================================================================
   DIE CHARAKTERSEITE (seit 25.09.2026) — fünf Schritte in EINEM Fenster.

   Ansage des Bro: „weg von diesen kerzenlichtern mehr jetzt im unseren style
   schwarzer hintergrund und das fenster so wie wir das immer machen“. Das
   Fenster ist das der Tafeln im Spiel (.wt-tafel, .sp-tafel): dunkler
   Verlauf, ein Messingstrich, eckig. Der Grund ist schwarz.

   Geladen NACH ui.css (page(), `head`), darum genügen hier die Abweichungen;
   die Wahlknöpfe selbst (.ch-kachel, .ch-farbe, .ch-herkunft …) und ihre
   Zustände (gewählt, vergeben, gesperrt) bleiben die aus ui.css.

   KEIN SCROLLBALKEN IM FENSTER, wo es sich vermeiden lässt: Jeder Schritt
   bekommt die Höhe des Fensters, und was darin zu groß wäre, wird kleiner
   (Bilder über vh), nicht länger. Nur als Notnagel auf sehr kleinen
   Schirmen scrollt der Schritt selbst.
   =========================================================================== */

html:has(.ch-buehne),
body:has(.ch-buehne) {
  background: #0b0d10;
}
/* DIE SEITE WÄCHST UND SCHRUMPFT MIT DEM FENSTER — wie der Vorplatz (hub.css):
   Alle Maße stehen in rem, und die Wurzelschrift ist die eine Schraube.
   `min()` nimmt das knappere der beiden Verhältnisse; auf einem 13-Zoll-Schirm
   (rund 1280 × 700 im Browser) wird alles kleiner, statt umzubrechen. */
html:has(.ch-buehne) {
  font-size: clamp(10px, min(1.05vw, 1.75vh), 16px);
}

/* DIE KULISSE — das Burgbild des Vorplatzes, stark gedämpft (hub.css, .kulisse
   und .schleier; Ansage des Bro: „anstelle des schwarzen hintergrunds dieses
   bild wie bei dem hub“). */
.ch-kulisse {
  position: fixed;
  inset: -2%;
  z-index: 0;
  background: url("/app/ladebilder/burg-feldherr-2.png") center 24% / cover no-repeat;
  filter: saturate(0.72) brightness(0.5);
  animation: ch-kulissenzug 90s ease-in-out infinite alternate;
}
@keyframes ch-kulissenzug {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); }
}
.ch-schleier {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(130% 85% at 50% 0%, rgba(10, 12, 15, 0.2), rgba(9, 11, 14, 0.9) 72%),
    linear-gradient(180deg, rgba(9, 11, 14, 0.72) 0%, rgba(9, 11, 14, 0.46) 28%, rgba(9, 11, 14, 0.95) 100%);
}
.ch-buehne > :not(.ch-kulisse):not(.ch-schleier):not(.ch-probe-band):not(.ch-ton):not(.seitenfuss) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .ch-kulisse { animation: none; }
}

.ch-buehne {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem 1.2rem;
  box-sizing: border-box;
  background: transparent;
}

.ch-form {
  width: min(1260px, 100%);
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
}

/* --- Der Titel des Spiels: die TITELMARKE (/app/3d/titelmarke.css) -------
   Hier steht nur ihre Groesse; das Aussehen ist fuer das ganze Spiel eines. */
.ch-spieltitel {
  text-align: center;
  /* Luft zwischen Titel und Fenster (Ansage: „gerade klebt der titel an unserem fenster“). */
  margin: 0.4rem 0 1.6rem;
  /* DIESELBE GRÖSSE WIE AUF DER ANMELDUNG (26.09.2026, Ansage des Bro: „mach
     die charakterseite 1zu1 wie auf login“). In PIXELN, nicht in rem: Die
     Anmeldung rechnet mit 19 px Wurzelschrift (ui.css), diese Seite mit einer,
     die mit dem Fenster schrumpft — derselbe rem-Wert gäbe hier 30 statt 47 px.
     clamp(1.4rem, 4.6vw, 2.8rem) (.hero__kopf) bei 19 px ist genau dies; wer
     die Anmeldung anfasst, zieht es nach. Gilt auch für die Rechtsseiten. */
  --titelmarke-groesse: clamp(26.6px, 4.6vw, 53.2px);
}

/* --- Die Stationen über dem Fenster: graue Knöpfe wie Zurück/Weiter ------ */
.ch-stationen { margin: 0; }
.ch-station {
  padding: 0.3rem 0.8rem 0.3rem 0.35rem;
  background: linear-gradient(180deg, #333941, #22262b);
  border: 1px solid var(--iron);
  border-radius: 2px;
}
.ch-station:hover { border-color: var(--iron-light); }
.ch-station.aktiv { border-color: var(--brass-dark); background: linear-gradient(180deg, #3b3126, #241e17); }
.ch-station span { font-family: var(--font-display); font-size: 1.02rem; }
.ch-station i { background: #0d0f12; width: 28px; height: 28px; }

/* --- Das Fenster ----------------------------------------------------------- */
.ch-fenster {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(50rem, calc(100vh - 13.8rem - var(--seitenfuss-hoehe, 0rem)));
  min-height: 24rem;
  padding: 1.1rem 1.6rem 0;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(38, 42, 48, 0.99), rgba(22, 25, 29, 0.99));
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
.ch-js .ch-fenster { overflow: hidden; }

.ch-fenster-kopf {
  flex: none;
  padding-bottom: 0.5rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--iron);
}
.ch-schrittzahl {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.ch-fenster-kopf h2 {
  margin: 0 0 0.1rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: normal;
  color: var(--brass-light);
}
.ch-unter { margin: 0; color: var(--text-dim); max-width: none; }
.ch-fehler { flex: none; margin: 0 0 0.6rem; }

/* Die Schritte: ohne Skript untereinander, mit Skript einer auf einmal und
   so hoch wie das Fenster. */
.ch-js .ch-schritt { display: none; }
.ch-js .ch-schritt.aktiv {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  animation: ch-auftritt 0.3s ease;
}
@keyframes ch-auftritt {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.ch-schritt > :not(.ch-fenster-kopf) { min-height: 0; }

/* --- I: Was zu tun ist --------------------------------------------------- */
.ch-anleitung {
  flex: 1;
  overflow-y: auto;
  max-width: none;
  font-size: 1.1rem;
  line-height: 1.65;
}
.ch-anleitung .wahl-anleitung { margin: 0.4rem 0 1.4rem; padding-left: 1.6rem; }
.ch-anleitung .wahl-anleitung li { margin-bottom: 0.8rem; }
.ch-anleitung .wahl-anleitung li::marker { color: var(--brass); font-family: var(--font-display); }
.ch-anleitung .prolog-geduld {
  margin: 0;
  padding: 0.9rem 1.1rem;
  --schein: var(--brass);
  background: linear-gradient(90deg, color-mix(in srgb, var(--schein) 22%, transparent), transparent 70%), rgba(0, 0, 0, 0.22);
  color: var(--parchment);
  font-size: 1.15rem;
}

/* --- II: Herkunft -------------------------------------------------------- */
.ch-herkuenfte {
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  overflow-y: auto;
  align-content: start;
}
.ch-herkunft-tafel { background: rgba(0, 0, 0, 0.25); }
.ch-herkunft input:checked ~ .ch-herkunft-tafel { background: rgba(204, 167, 94, 0.07); }
/* ALLE DREI BILDER GLEICH HOCH (Ansage des Bro: „es muss unbedingt gleiche
   höhe aller drei bilder sein“) — über ein Unterraster: Die Karten teilen sich
   EINE Bildzeile (sie nimmt, was übrig ist) und EINE Textzeile (so hoch wie
   der längste Text). So passt es bei jeder Fensterhöhe ohne Scrollbalken, und
   kein Bild springt, weil eine Karte eine Zeile mehr Text hat. */
.ch-herkuenfte {
  grid-template-rows: minmax(90px, 1fr) auto;
  align-content: stretch;
}
.ch-herkunft {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
}
.ch-herkunft-tafel {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}
.ch-herkunft-bild {
  height: 100%;
  min-height: 0;
  object-fit: cover;
  /* Das Siegel steht mittig auf dunklem Grund — der Ausschnitt nimmt nur Grund weg. */
  object-position: 50% 50%;
}
.ch-herkunft-tafel h3 { font-family: var(--font-display); font-weight: normal; font-size: 1.45rem; margin: 0 0 0.25rem; }
/* ui.css schreibt jedes <label> in Versalien (für die Anmeldemaske) — die
   Karten und das Namensfeld sind Labels und brauchen das nicht. */
.ch-herkunft,
.ch-namenfeld {
  text-transform: none;
  letter-spacing: normal;
  font-size: inherit;
  color: var(--text);
}
.ch-herkunft-tafel { padding: 0.7rem 0.85rem 0.8rem; font-size: 0.95rem; }
.ch-herkunft-tafel .eyebrow { font-size: 0.7rem; }
.ch-herkunft-tafel p { margin: 0 0 0.45rem; line-height: 1.4; }
.ch-herkunft-bild { margin: -0.7rem -0.85rem 0.55rem; width: calc(100% + 1.7rem); }
/* DIE MÜNZE DER KLASSE (06.10.2026, klassenmuenzen.js): eine Leinwand im
   selben Feld wie das Siegel, darüber gelegt. Steht das 3D, tritt das Siegel
   zurück — `visibility`, nicht `display`, damit das Feld seine Höhe behält.
   Ungewählt zeigt sie den Bergfried, gewählt wendet sie sich zum Zeichen. */
.ch-herkunft-bild,
.ch-muenze { grid-row: 1; grid-column: 1; }
.ch-herkunft-text { grid-row: 2; grid-column: 1; }
.ch-muenze {
  display: block;
  height: 100%;
  min-height: 0;
  margin: -0.7rem -0.85rem 0.55rem;
  width: calc(100% + 1.7rem);
  /* Immer der Zeigefinger, auch beim Ziehen (Ansage: „immer zeigefinger
     nicht die hand"). */
  cursor: var(--cursor-gold, pointer);
  touch-action: pan-y;
}
.ch-muenze-3d .ch-herkunft-bild { visibility: hidden; }
.ch-klassenbonus { margin-bottom: 0.45rem; }
.ch-klassenbau { margin: 0 0 0.45rem; font-size: 0.85em; line-height: 1.3; }
.ch-klassenbonus { padding: 0.25rem 0.5rem; font-size: 0.92em; }
/* Die Mitgift in drei Spalten statt sechs Zeilen. */
.ch-mitgift { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: flex-end; }
.ch-vorrat { min-width: 11rem; }
.ch-vorrat {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 0.8rem;
  margin: 0;
}
.ch-vorrat li { gap: 0.3rem; }
/* Die drei Bergfriede klein in einer Reihe — die Höhe ist das Maß, nicht die Breite. */
.ch-stufen { flex: none; display: flex; gap: 0.35rem; align-items: flex-end; margin: 0; }
.ch-stufe { flex: none; }
.ch-stufe img { height: clamp(44px, 7vh, 72px); width: auto; }
.ch-stufe figcaption { font-size: 0.7rem; }

/* --- III: Das Wappen ----------------------------------------------------- */
.ch-wappenbau {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: 1.6rem;
  align-items: stretch;
  margin: 0;
}
/* Die Farben in einer Reihe, darunter das Zeichenfeld — es füllt den Rest,
   und charakter.js passt die Kacheln so groß ein, wie der Platz hergibt. */
.ch-wappen-regler { display: flex; flex-direction: column; min-height: 0; }
.ch-farbreihe { display: flex; flex-wrap: wrap; column-gap: 1.6rem; flex: none; }
.ch-wappen-regler > .ch-vergeben-hinweis { flex: none; }
.ch-zeichenfeld { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.ch-zeichenfeld .ch-raster-symbole { flex: 1; min-height: 0; overflow: hidden; align-content: start; }
.ch-schildbuehne {
  position: relative;
  min-height: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(204, 167, 94, 0.09), rgba(0, 0, 0, 0) 62%);
}
#ch-schild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: var(--cursor-hand);
  touch-action: none;
}
#ch-schild:active { cursor: var(--cursor-hand-zu); }
/* Der gezeichnete Schild ist der Rückfall, wenn kein 3D zu haben ist. */
.ch-schildbuehne .ch-wappen-vorschau {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(60%, 300px);
  height: auto;
  aspect-ratio: 96 / 112;
  transform: translate(-50%, -50%);
}
.ch-schild-3d .ch-schildbuehne .ch-wappen-vorschau { display: none; }
.ch-js:not(.ch-schild-3d) #ch-schild { display: none; }

.ch-wappen-regler {
  overflow: hidden;
  padding-right: 0.3rem;
}
.ch-wappen-regler .ch-feld legend {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--brass-light);
}
.ch-raster-symbole { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 5px; margin-top: 0.2rem; }
.ch-kachel .ch-symbol { background-color: rgba(215, 199, 163, 0.85); }

/* --- IV: Das Bildnis ------------------------------------------------------ */
.ch-bildnisbau {
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.6rem;
  min-height: 0;
}
/* Das gewählte Bildnis so groß, wie das Fenster hergibt — auf seinem
   dunkelgrauen Grund (avatare/grau, 900²; seit 25.09.2026 statt der
   freigestellten Fassung, deren Magentasaum man in der Größe sah). */
.ch-bildnis-gross {
  margin: 0;
  height: 100%;
  aspect-ratio: 1;
  max-width: 50vw;
  background: #202226;
  border: 1px solid var(--iron);
  overflow: hidden;
}
.ch-bildnis-gross img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ch-bildnis-wahl {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ch-reiter { display: flex; gap: 0.4rem; flex: none; }
.ch-reiter-knopf {
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.1rem;
  padding: 0.35rem 1rem;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--iron);
  border-radius: 2px;
  cursor: var(--cursor-gold);
}
.ch-reiter-knopf:hover { color: var(--parchment); border-color: var(--iron-light); }
.ch-reiter-knopf.aktiv { color: var(--brass-light); border-color: var(--brass-dark); background: rgba(204, 167, 94, 0.08); }
/* Der Hinweis in EINER Zeile (Ansage: „ohne absatz schreiben“) — ui.css gibt
   jedem <p> eine Höchstbreite von 68 Zeichen. */
.ch-bildnis-wahl .ch-vergeben-hinweis { flex: none; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-raster-avatare {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Die Spalten setzt charakter.js (einpassen): so groß wie möglich, ohne
     Scrollbalken. Das hier gilt nur ohne Skript. */
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-content: start;
  gap: 6px;
  padding: 2px;
}
.ch-raster-avatare[hidden] { display: none; }
.ch-raster-avatare .ch-kachel img {
  aspect-ratio: 0.85;
  object-fit: cover;
  object-position: 50% 10%;
  background: #202226;
}

/* --- V: Der Name ---------------------------------------------------------- */
/* Das Bild nimmt, was über dem Namensfeld frei ist — nie mehr, sonst ragt es
   in die Überschrift, sobald das Fenster niedriger wird. */
.ch-namenbau {
  flex: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 1.2rem;
  min-height: 0;
}
/* Wer man bis hierher geworden ist: Bildnis, Schild, Herkunft. */
#ch-geleit-wahl {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  min-height: 0;
}
/* DAS BILD DES VORPLATZES (hub.css, .portraitrahmen und .wappenchen), nur
   größer: quadratischer Rahmen, das Bildnis aufs Gesicht gezoomt, das Schild
   unten rechts. Das Schild ist 30 % kleiner als auf dem Vorplatz (27 statt
   39 % der Rahmenbreite; Ansage: „es verdeckt noch zu sehr die person“). */
.ch-herrbild {
  position: relative;
  height: min(100%, 360px);
  width: auto;
  aspect-ratio: 1;
  border: 2px solid var(--brass-dark);
  border-radius: 2px;
  background: #202226;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(204, 167, 94, 0.25);
  overflow: hidden;
}
.ch-herrbild img {
  display: block;
  width: 150%;
  height: auto;
  margin-left: -25%;
}
.ch-herrbild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(204, 167, 94, 0.14), transparent 45%, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.ch-herrbild .ch-geleit-wappen {
  position: absolute;
  right: 2%;
  bottom: 2%;
  z-index: 1;
  width: 27%;
  height: auto;
  aspect-ratio: 100 / 118;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
}

/* --- I: Bevor Ihr beginnt ---------------------------------------------------- */
.ch-vorwort {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  /* Eine Regel je Zeile, der Satz in voller Breite (Ansage: „die regeln
     untereinander schreiben und die vollen sätze ausschreiben in der breite“). */
  grid-template-columns: 1fr;
  gap: 0.9rem;
  font-size: 1.08rem;
}
.ch-vorwort li {
  padding: 0.2rem 0 0.2rem 1rem;
  --schein: var(--brass-dark); background-image: linear-gradient(90deg, color-mix(in srgb, var(--schein) 22%, transparent), transparent 70%);
}
.ch-vorwort strong {
  display: inline;
  margin-right: 0.35rem;
  font-family: var(--font-display);
  font-weight: normal;
  font-size: 1.2rem;
  color: var(--brass-light);
}
.ch-namenfeld {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: min(36rem, 100%);
}
.ch-namenfeld-titel { color: var(--text-dim); font-size: 0.95rem; }
.ch-namenfeld input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-display);
  font-size: 2.4rem;
  text-align: center;
  color: var(--parchment);
  background: rgba(0, 0, 0, 0.3);
  border: none;
  border-bottom: 2px solid var(--brass-dark);
  border-radius: 0;
  outline: none;
}
.ch-namenfeld input:focus { border-bottom-color: var(--brass-light); background: rgba(0, 0, 0, 0.45); }
.ch-namenfeld-hinweis { color: var(--text-dim); font-size: 0.88rem; text-align: center; }
.ch-namenfeld-hinweis b { color: var(--parchment); font-weight: normal; }

/* --- Die Fußzeile des Fensters ------------------------------------------- */
.ch-geleit {
  position: static;
  flex: none;
  justify-content: flex-end;
  margin: 1rem -1.6rem 0;
  padding: 0.7rem 1.6rem;
  background: rgba(0, 0, 0, 0.22);
  border-top: 1px solid var(--iron);
  backdrop-filter: none;
}
.ch-geleit .ch-zurueck { margin-right: auto; }
.ch-zurueck,
.ch-weiter,
.ch-siegel { font-family: var(--font-display); font-size: 1.12rem; padding: 0.45rem 1.5rem; }

/* Erst wenn es wirklich eng wird, stapelt die Seite (schmales Fenster, Tablet).
   Ein niedriger Laptopschirm wird über die Wurzelschrift kleiner, nicht gestapelt. */
@media (max-width: 900px), (max-height: 520px) {
  .ch-fenster { height: auto; min-height: 0; }
  .ch-js .ch-fenster { overflow: visible; }
  .ch-herkuenfte,
  .ch-wappenbau,
  .ch-bildnisbau { grid-template-columns: 1fr; }
  .ch-schildbuehne { min-height: 360px; }
  .ch-bildnis-gross { height: 420px; max-width: 100%; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-js .ch-schritt.aktiv { animation: none; }
}

/* --- Der Probedurchlauf (/charakter/probe) --------------------------------- */
.ch-probe-band {
  /* Oben: Unten lag es mit der Fußzeile über dem Haken zu den Regeln. */
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  margin: 0;
  padding: 0.3rem 1rem;
  font-size: 0.9rem;
  color: #111;
  background: var(--brass-light);
  border-radius: 2px;
}
.ch-probe-band a { color: #111; margin-left: 0.6rem; }
.ch-probe-meldung {
  margin: 0 auto 0 0;
  color: var(--brass-light);
}
.ch-probe-meldung + .ch-zurueck { margin-right: 0; }

/* --- Der Haken zu den Regeln, in der Zeile mit „Weiter“ ------------------ */
.ch-regelhaken {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  margin: 0 auto 0 0;
  padding: 0.35rem 0.7rem;
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--parchment);
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: var(--cursor-gold);
}
.ch-regelhaken[hidden] { display: none; }
.ch-regelhaken input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--brass); flex: none; }
.ch-regelhaken a { color: var(--brass-light); }
.ch-regelhaken.fehlt { border-color: #b85a4a; animation: ch-rueckeln 0.4s ease; }
@keyframes ch-rueckeln {
  0%, 100% { transform: none; }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.ch-weiter.stumpf { opacity: 0.45; }

/* --- Eingepasste Raster (charakter.js, einpassen) ----------------------------
   Die Kachel füllt ihre Zelle ganz; das Bild wird beschnitten, das Zeichen
   bleibt über die Maske unverzerrt. */
.eingepasst .ch-kachel { height: 100%; }
.eingepasst .ch-kachel img,
.eingepasst .ch-kachel .ch-symbol { height: 100%; aspect-ratio: auto; box-sizing: border-box; }
.eingepasst.ch-raster-avatare .ch-kachel img { object-position: 50% 15%; }

/* --- Der Gruß unter den Regeln -------------------------------------------- */
/* GANZ GROSS (Ansage des Bro: „und ganz groß schreiben“) — der Satz ist das
   Letzte, was man vor dem Haken liest. */
.ch-gruss {
  margin: 2rem 0 0;
  font-family: var(--font-display);
  font-size: 2.1rem;
  /* Nicht enger als 1,5: Die Titelschrift ragt mit ihren Oberlängen über eine
     engere Zeile hinaus, und das zählte als Überlauf — ein Scrollbalken von
     drei Bildpunkten. */
  line-height: 1.5;
  color: var(--brass-light);
  text-align: center;
}
.ch-gruss { max-width: none; }

/* --- Die Rechtsseiten (rechtstexte.ts) ------------------------------------ */
.rechtsfenster { height: auto; max-height: calc(100vh - 13.8rem - var(--seitenfuss-hoehe, 0rem)); width: min(62rem, 100%); }
.rechtsinhalt { overflow-y: auto; padding-bottom: 1.2rem; }
.rechtsinhalt h3 {
  margin: 1.2rem 0 0.35rem;
  font-family: var(--font-display);
  font-weight: normal;
  font-size: 1.25rem;
  color: var(--brass-light);
}
.rechtsinhalt h4 {
  margin: 0.9rem 0 0.2rem;
  font-size: 1rem;
  color: var(--parchment, inherit);
}
.rechtsinhalt p, .rechtsinhalt li { max-width: none; }
/* Das Kreuz oben rechts (rechtstexte.ts) — führt zurück, woher man kam. */
.rechtskopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.rechtsschliessen {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--iron);
  border-radius: 2px;
  background: linear-gradient(180deg, #333941, #22262b);
}
.rechtsschliessen:hover { color: var(--brass-light); border-color: var(--brass-dark); text-decoration: none; }
.rechtsinhalt .ch-vorwort { font-size: 1rem; }
.rechtsinhalt .rechtslinks { text-align: left; }
/* DIE REGELN FÜLLEN DAS FENSTER (Ansage des Bro: „wir müssen noch irgendwie den
   platz füllen … zwischen den regeln mehr platz lassen"): Die Liste nimmt die
   ganze Höhe über dem Gruß und verteilt den Abstand gleichmässig. Wird es eng
   (kleiner Schirm), bleibt der Mindestabstand aus `gap`. Nur auf der
   Charakterseite — die Rechtsseiten scrollen und brauchen das nicht. */
.ch-anleitung:has(> .ch-vorwort) { display: flex; flex-direction: column; }
.ch-anleitung > .ch-vorwort {
  flex: 1;
  /* Kein Aussenabstand: Die Liste füllt die Höhe genau, und die 0,2 rem oben
     standen sonst als Scrollbalken von drei Bildpunkten da. */
  margin: 0;
  align-content: space-evenly;
  gap: 0.6rem;
  /* „zeilenabstand erhöhen" — auch innerhalb einer Regel, wenn sie umbricht. */
  line-height: 1.75;
}
.ch-anleitung > .ch-gruss { margin-top: 1.2rem; }