/* ===========================================================================
   Charakterdetail — die Profilseite einer Figur.

   Eigene Datei und kein Anhang an app.css: Der Bereich hat genug eigene Bausteine,
   um sie beieinander zu halten, und dieselbe Entscheidung gilt bereits fuer den
   Wizard (REQ-UX-019).

   Der Ausgangspunkt war eine Seite, die aussah wie ein Verwaltungsformular: winziges
   Portrait, eine rechte Seitenleiste, die die gesamte obere Hoehe bestimmte, und
   links daneben mehrere hundert Pixel Leerraum. Die Ursache lag nicht in den Farben,
   sondern im Aufbau — ein zweispaltiges Raster, dessen eine Spalte den Rest
   diktierte.

   Die zweite Stufe (CHAR-040) loest ein anderes Problem: Die Seite bestand aus vielen
   fast gleich aussehenden Karten — dunkle Flaeche, grauer Rahmen, kleine Ueberschrift,
   ein paar Marken, naechste dunkle Flaeche. Gleichfoermigkeit erzeugt keine Rangfolge,
   und ohne Rangfolge liest man nicht, sondern sucht. Deshalb gibt es jetzt drei
   Ebenen statt einer: Bereich (gross, mit Akzentlinie und getoentem Kopf), Block
   (Untergliederung ohne eigenen Kasten, nur Haarlinie und Untertitel) und erst
   darunter die Karte oder Tafel, wo ein Kasten fachlich richtig ist.

   Alle Farben und Abstaende stammen aus den Tokens in app.css. Hier steht keine
   Hexfarbe, ausser fuer die halbtransparenten Auflagen ueber dem Portrait.

   ---------------------------------------------------------------------------
   BAUSTEINLISTE — verbindlich. Wer Markup fuer das Charakterdetail schreibt,
   benutzt diese Klassen und erfindet keine neuen. Fehlt ein Baustein, wird er
   hier ergaenzt und dokumentiert, nicht im Razor improvisiert (Projektregel 10).

   BEREICHE (REQ-CHAR-049)
     .ch-bereiche              Stapel aller Bereiche, grosser Abstand dazwischen
     .ch-bereich               Ein Hauptbereich: Akzentlinie oben, getoenter Kopf
     .ch-bereich--leise        Verwaltungsangaben, treten zurueck (REQ-CHAR-058)
     .ch-bereich__kopf         Kopfzeile des Bereichs
     .ch-bereich__titel        Ueberschrift im Kopf (Schriftstufe 2)
     .ch-bereich__zusatz       Zaehler oder Kurzhinweis neben dem Titel
     .ch-bereich__aktionen     Schaltflaechen rechts im Kopf
     .ch-bereich__inhalt       Inhaltsflaeche mit Innenabstand
     .ch-bereich__fuss         Abschlusszeile, leiser Grund

   AKZENTFARBEN (REQ-CHAR-051) — auf .ch-bereich, .ch-tafel oder .ch-marke
     .ch-akzent--identitaet    Tuerkis  Identitaet und Attribute
     .ch-akzent--macht         Gold     Macht und Rang
     .ch-akzent--magie         Violett  Magie und Formen
     .ch-akzent--welt          Blau     Welt, Herkunft, Bindungen
     .ch-akzent--freigabe      Gruen    Freigabe, bestaetigt
     .ch-akzent--pruefung      Orange   Pruefung, Altbestand
     .ch-akzent--warnung       Rot      NUR Tod, kritische Verletzung, echte Warnung

   UNTERGLIEDERUNG innerhalb eines Bereichs (REQ-CHAR-054, REQ-CHAR-055)
     .ch-bloecke               Stapel von Bloecken, durch Haarlinien getrennt
     .ch-block                 Ein Block ohne eigenen Kasten
     .ch-block__kopf           Zeile aus Untertitel und Zaehler
     .ch-block__anzahl         Kleiner Zaehler neben dem Untertitel
     .ch-spalten               Zweispaltiger Inhalt, faellt selbsttaetig zusammen

   SCHRIFTRANGFOLGE (REQ-CHAR-052)
     .ch-figurname             1 Charaktername
     .ch-bereichstitel         2 Bereichstitel
     .ch-untertitel            3 Untertitel eines Blocks
     .ch-feldname              4 Feldbezeichnung
     .ch-feldwert              5 Feldwert
     .ch-erlaeuterung          6 Erlaeuterung

   WERTE UND MACHT (REQ-CHAR-050, REQ-CHAR-053)
     .ch-attrs / .ch-attr      Attributraster, drei mal drei, grosse Zahl
     .ch-attr__abbr            Kuerzel ueber der Zahl
     .ch-attr__value           Die Zahl selbst
     .ch-attr__value--none|--base|--high|--peak   Staffelung der Hoehe
     .ch-attr__mod             Modifikator unter der Zahl
     .ch-power                 Wertetafel Macht, goldene Zahlen
     .ch-power__cell           Eine Zelle der Machttafel
     .ch-power__label          Beschriftung, klein ueber der Zahl
     .ch-power__value          Die Zahl
     .ch-power__value--muted   Kein Wert festgelegt
     .ch-power__hint           Erlaeuterung unter der Zahl
     .ch-power__legacy         Altwert, gestrichelt und orange
     .ch-tafel                 Allgemeine Wertetafel, Farbe aus dem Akzent
     .ch-tafel__zelle          Eine Zelle
     .ch-tafel__marke          Beschriftung, klein darueber
     .ch-tafel__zahl           Die Zahl
     .ch-tafel__zusatz         Erlaeuterung unter der Zahl

   GEGENUEBERSTELLUNG (REQ-CHAR-050)
     .ch-gegenueber                    Zwei Spalten, auf schmal untereinander
     .ch-gegenueber__seite             Eine Seite
     .ch-gegenueber__seite--staerke    Links, gruener Akzent
     .ch-gegenueber__seite--schwaeche  Rechts, warmer Akzent
     .ch-gegenueber__titel             Ueberschrift der Seite

   BINDUNGEN
     .ch-marken                Marken nebeneinander mit Umbruch
     .ch-marke                 Namensmarke, blauer Akzent
     .ch-marke__rolle          Rolle oder Verwandtschaft an der Marke
     .ch-marke--verweis        Anklickbare Marke (immer ein <button>)

   LEERZUSTAND (REQ-CHAR-059)
     .ch-leer                  Kompakter Leerzustand, hoechstens zwei Zeilen
     .ch-leer__text            Der Satz
     .ch-leer__aktion          Der naechste Schritt
     .ch-empty                 Einzeiliger Hinweis innerhalb einer Karte

   BESTEHENDE BAUSTEINE (unveraendert weiter benutzbar)
     .ch-hero                  Kopfbereich, Geschlechtsakzent an der linken Kante
     .ch-hero__profil          Dritte Spalte des Kopfes, nimmt das Machtprofil auf
     .ch-portrait              Portraitflaeche, Seitenverhaeltnis 3:4
     .ch-portrait__empty       Leerzustand ohne Bild
     .ch-portrait__tag         Kennzeichen auf dem Bild
     .ch-portrait__tag--start | --end   Links oder rechts oben
     .ch-identity              Namensspalte
     .ch-identity__name        Charaktername (Schriftstufe 1)
     .ch-identity__line        Zeile aus Spezies, Rolle, Zustand
     .ch-identity__badges      Marken unter dem Namen
     .ch-facts                 Schnellfakten in Gruppen
     .ch-facts__group          Eine Gruppe
     .ch-facts__title          Gruppenueberschrift
     .ch-fact                  Eine Angabe
     .ch-fact__key             Bezeichnung
     .ch-fact__value           Wert
     .ch-states                Zustandssysteme nebeneinander
     .ch-state                 Ein Zustandssystem
     .ch-state__label          Bezeichnung
     .ch-state__value          Marken des Zustands
     .ch-grid                  Kartenfeld, wenn Inhalte wirklich gleichrangig sind
     .ch-grid__wide            Karte ueber zwei Spalten
     .ch-card__more            Zeile „weitere anzeigen"
     .ch-list                  Aufzaehlung von Werten
     .ch-list__item            Ein Eintrag
     .ch-list__value           Zahlenwert am Eintrag, folgt dem Akzent
     .ch-tree                  Stammbaum-Zusammenfassung
     .ch-tree__label           Ueberschrift einer Reihe
     .ch-tree__row             Eine Reihe
     .ch-tree__stem            Senkrechte Verbindungslinie
     .ch-tree__node            Ein Name im Baum
     .ch-tree__node--self      Der betrachtete Charakter
     .ch-tree__node--link      Anklickbar
     .ch-tree__kind            Verwandtschaftsbezeichnung
     .ch-tree__adoptive        Adoptionskennzeichen, steht am KIND
     .ch-subtabs / .ch-subtab  Untergliederung, nur im gewaehlten Hauptbereich
     .sh-linkbtn               Schaltflaeche im Aussehen eines Verweises

   Die aelteren Bausteine behalten ihre englischen Namen. Umbenennen haette Markup
   gebrochen, das parallel bearbeitet wird — und ein halb umbenanntes System ist
   schlechter als ein konsequent dokumentiertes gemischtes.
   =========================================================================== */

/* ========================================================== Akzentfarben */

/* Eine Modifikatorklasse je Bedeutung. Sie setzt drei lokale Eigenschaften; alle
   Bausteine darunter lesen diese und nicht die Grundtokens. Dadurch faerbt ein
   einziges Wort am Bereich Akzentlinie, Kopfton und Titel — und niemand muss an
   fuenf Stellen dieselbe Farbe wiederholen.

   Gefaerbt werden Linie, Kopf und Zahl, NIEMALS die ganze Flaeche: Sieben
   flaechig eingefaerbte Bereiche untereinander waeren wieder Gleichfoermigkeit,
   nur bunter (REQ-CHAR-051).

   --ch-akzent-weich und --ch-akzent-linie greifen auf die vorhandenen -soft
   Tokens zurueck, wo es sie gibt. Nur die fehlenden Linienwerte werden gemischt —
   app.css tut das bei den Geschlechtsakzenten bereits genauso. */

.ch-akzent--identitaet {
    --ch-akzent: var(--sh-accent);
    --ch-akzent-weich: var(--sh-accent-soft);
    --ch-akzent-linie: var(--sh-accent-line);
}

.ch-akzent--macht {
    --ch-akzent: var(--sh-gold);
    --ch-akzent-weich: var(--sh-gold-soft);
    --ch-akzent-linie: color-mix(in srgb, var(--sh-gold) 34%, transparent);
}

.ch-akzent--magie {
    --ch-akzent: var(--sh-purple);
    --ch-akzent-weich: var(--sh-purple-soft);
    --ch-akzent-linie: color-mix(in srgb, var(--sh-purple) 34%, transparent);
}

.ch-akzent--welt {
    --ch-akzent: var(--sh-blue);
    --ch-akzent-weich: var(--sh-blue-soft);
    --ch-akzent-linie: color-mix(in srgb, var(--sh-blue) 34%, transparent);
}

.ch-akzent--freigabe {
    --ch-akzent: var(--sh-success);
    --ch-akzent-weich: var(--sh-success-soft);
    --ch-akzent-linie: color-mix(in srgb, var(--sh-success) 34%, transparent);
}

.ch-akzent--pruefung {
    --ch-akzent: var(--sh-warn);
    --ch-akzent-weich: var(--sh-warn-soft);
    --ch-akzent-linie: color-mix(in srgb, var(--sh-warn) 34%, transparent);
}

/* Rot ist reserviert. Wer diese Klasse setzt, meint Tod, kritische Verletzung oder
   eine echte Warnung — nichts sonst (REQ-CHAR-051). */
.ch-akzent--warnung {
    --ch-akzent: var(--sh-danger);
    --ch-akzent-weich: var(--sh-danger-soft);
    --ch-akzent-linie: color-mix(in srgb, var(--sh-danger) 34%, transparent);
}

/* ========================================================== Schriftrangfolge */

/* Sechs Stufen, jede in Groesse UND Helligkeit unterscheidbar (REQ-CHAR-052).
   Groesse allein reicht nicht: Zwischen 0.82rem und 0.78rem sieht niemand einen
   Unterschied, zwischen hellem und mattem Grau schon auf einen Blick. */

.ch-figurname {
    margin: 0;
    font-size: clamp(1.55rem, 2.7vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.12;
    color: var(--sh-text);
}

.ch-bereichstitel,
.ch-bereich__titel {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.25;
    /* Der Bereichstitel traegt die Akzentfarbe — er ist zugleich das Wort, das die
       Farbe erklaert, damit Farbe nie allein steht (REQ-UX-015). */
    color: var(--ch-akzent, var(--sh-text));
    text-transform: none;
}

/* Bewusst versal und klein: Der Untertitel ordnet innerhalb eines Bereichs und darf
   nicht mit dessen Ueberschrift um Aufmerksamkeit streiten. */
.ch-untertitel {
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sh-text-dim);
}

.ch-feldname {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

.ch-feldwert {
    font-size: .9rem;
    line-height: 1.45;
    color: var(--sh-text);
    min-width: 0;
    overflow-wrap: anywhere;
}

.ch-erlaeuterung {
    font-size: .74rem;
    line-height: 1.5;
    color: var(--sh-text-faint);
}

/* ================================================================ Bereiche */

/* Fuenf Bereiche tragen die Seite: Kopf, Identitaet und Zustand, Werte und Macht,
   Kraefte, Welt und Bindungen (REQ-CHAR-049).

   Grosser Abstand zwischen den Bereichen, kleiner darin. Das ist der eigentliche
   Traeger der Rangfolge: Naehe bedeutet Zusammengehoerigkeit, und wenn alle
   Abstaende gleich sind, gehoert alles gleich stark zusammen — also nichts. */
.ch-bereiche {
    display: grid;
    gap: var(--sh-space-xl);
    align-content: start;
    min-width: 0;
}

.ch-bereich {
    min-width: 0;
    border: 1px solid var(--sh-border);
    /* Die Akzentlinie oben. 2px, weil 1px im dunklen Grund verschwindet und 4px
       eine Zierleiste waere. Ohne Akzentklasse bleibt sie neutral — dann ist der
       Bereich eben unbestimmt und behauptet keine Bedeutung. */
    border-top: 2px solid var(--ch-akzent, var(--sh-border-strong));
    border-radius: var(--sh-radius-lg);
    background: var(--sh-surface);
    overflow: hidden;
}

.ch-bereich__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sh-space-xs) var(--sh-space-sm);
    padding: var(--sh-space-sm) var(--sh-space-lg);
    border-bottom: 1px solid var(--sh-border);
    /* Die Toenung liegt als Bildschicht ueber --sh-surface-2. Direkt als
       Hintergrundfarbe gesetzt saehe ein Bereich ohne Akzentklasse anders aus als
       einer mit — hier bleibt der Grund immer derselbe, nur leicht eingefaerbt. */
    background:
        linear-gradient(0deg, var(--ch-akzent-weich, transparent) 0 100%),
        var(--sh-surface-2);
}

.ch-bereich__zusatz {
    font-size: .72rem;
    color: var(--sh-text-faint);
    font-variant-numeric: tabular-nums;
}

.ch-bereich__aktionen {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-xs);
}

.ch-bereich__inhalt {
    padding: var(--sh-space-lg);
    display: grid;
    gap: var(--sh-space-md);
    align-content: start;
    min-width: 0;
}

.ch-bereich__fuss {
    padding: var(--sh-space-sm) var(--sh-space-lg);
    border-top: 1px solid var(--sh-border);
    background: var(--sh-surface-2);
    font-size: .76rem;
    color: var(--sh-text-dim);
}

/* Verwaltungsangaben — Spieler, angelegt, geaendert, Regelverwaltung. Sie gehoeren
   auf die Seite, aber nicht in die erste Reihe: kein Akzent, matter Grund, kleinere
   Schrift (REQ-CHAR-058). */
.ch-bereich--leise {
    border-top-color: var(--sh-border);
    background: var(--sh-bg-2);
}

.ch-bereich--leise .ch-bereich__kopf {
    background: transparent;
    border-bottom-color: var(--sh-border-soft);
}

.ch-bereich--leise .ch-bereich__titel {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

.ch-bereich--leise .ch-bereich__inhalt {
    padding: var(--sh-space-md) var(--sh-space-lg);
    font-size: .8rem;
    color: var(--sh-text-dim);
}

/* ---------------------------------------------------- Bloecke im Bereich */

/* Die Untergliederung eines Bereichs. Ein Block hat KEINEN eigenen Kasten — nur
   eine Haarlinie darueber und einen Untertitel.

   Genau hier lag das Grundproblem: Magie, Faehigkeiten, Formen, Spezialisierungen
   und Talente waren fuenf gleichrangige Karten. Als Bloecke unter einem Bereich
   „Kraefte" bleiben sie unterscheidbar, ohne fuenfmal denselben Rahmen zu ziehen
   (REQ-CHAR-054, REQ-CHAR-055). */
.ch-bloecke {
    display: grid;
    gap: var(--sh-space-md);
    min-width: 0;
}

.ch-block {
    display: grid;
    gap: var(--sh-space-sm);
    align-content: start;
    padding-top: var(--sh-space-md);
    border-top: 1px solid var(--sh-border-soft);
    min-width: 0;
}

/* Der erste Block braucht keine Trennlinie — darueber steht bereits der Bereichskopf. */
.ch-block:first-child {
    padding-top: 0;
    border-top: 0;
}

.ch-block__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sh-space-xs) var(--sh-space-sm);
}

.ch-block__anzahl {
    font-size: .7rem;
    color: var(--sh-text-faint);
    font-variant-numeric: tabular-nums;
}

/* Eine Schaltflaeche im Blockkopf — etwa „Ort aendern" bei Herkunft und Aufenthalt
   (REQ-KARTE-016). Sie sitzt am rechten Rand, weil der Untertitel links steht und die
   Handlung sonst mitten im Satz haenge. Der Blockkopf richtet an der Schriftlinie aus;
   fuer einen Knopf ist das zu tief, deshalb hier ausdruecklich mittig. */
.ch-block__aktion {
    margin-left: auto;
    align-self: center;
}

/* Die Antwort der Spielleitung auf eine Charakternotiz (CHAR-113). Sie steht
   eingerueckt unter der Notiz und mit einer eigenen Kante links: Die Antwort ist Teil
   derselben Zeile und trotzdem eine andere Stimme — ohne den Absatz laesen Frage und
   Antwort wie ein durchgehender Text desselben Verfassers. */
.ch-block__antwort {
    margin-left: var(--sh-space-md);
    padding-left: var(--sh-space-md);
    border-left: 2px solid var(--sh-border-soft);
    display: grid;
    gap: var(--sh-space-xs);
}

/* Zwei Spalten, wo Platz ist, sonst eine. auto-fit statt fester Spaltenzahl: Ein
   Block mit wenig Inhalt soll die Breite nutzen und nicht als schmale Saeule
   dastehen. */
.ch-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--sh-space-md) var(--sh-space-lg);
    align-items: start;
    min-width: 0;
}

/* ============================================================ Kopfbereich */

/* Der Kopf ist der erste der fuenf Bereiche und bleibt bewusst ein eigener
   Baustein: Er traegt Portrait, Identitaet und Machtprofil nebeneinander, was
   keine der anderen Bereiche tut.

   Der Geschlechtsakzent liegt als linke Kante, nicht als vollflaechiger Rahmen:
   Er soll die Figur kennzeichnen, nicht die Karte einfaerben. Die Farbe kommt aus
   den .gender-* Klassen in app.css und wird ausschliesslich aus der
   Geschlechtsidentitaet bestimmt (REQ-GEN-031) — niemals aus Koerpergeschlecht,
   Geschlechtsgeschichte, Spezies oder Charaktertyp. */
/* Die Portraitspalte misst 220 bis 300 px — die Spanne, die REQ-CHAR-039 nennt.
   Sie stand bis zum 07.09.2026 auf 200-260 und in der dreispaltigen Fassung sogar auf
   190-240; ein Portrait unter 220 px ist kein grosses Portrait mehr, sondern eine
   Kachel. In der dreispaltigen Fassung endet sie bei 280 statt 300, damit die
   Identitaet in der Mitte bei 1200 px nicht unter die Lesbarkeitsschwelle geraet. */
.ch-hero {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: var(--sh-space-lg);
    align-items: start;
    padding: var(--sh-space-lg);
    border: 1px solid var(--sh-border);
    border-left-width: 3px;
    border-left-color: var(--gender-accent, var(--sh-border));
    border-radius: var(--sh-radius-lg);
    background: var(--sh-surface);
    min-width: 0;
}

/* Die dritte Spalte: das Machtprofil neben der Identitaet statt darunter. Wer eine
   Figur aufschlaegt, will Rang und Stufe sofort sehen und nicht erst scrollen.

   :has() statt einer festen dritten Spalte, weil der Kopf auch ohne Machtprofil
   auftreten kann — eine leere dritte Spur haette rechts eine Luecke hinterlassen,
   die wie ein Fehler aussieht. */
@media (min-width: 1200px) {
    .ch-hero:has(.ch-hero__profil) {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(220px, 300px);
    }

    .ch-hero:has(.ch-hero__profil) .ch-hero__profil {
        grid-column: auto;
        padding: 0 0 0 var(--sh-space-lg);
        border-top: 0;
        border-left: 1px solid var(--sh-border);
    }
}

/* Unterhalb der Schwelle rutscht das Profil unter die Identitaet und laeuft ueber
   die volle Breite — dort hat es mehr Platz fuer die Zellen nebeneinander als in
   einer gequetschten dritten Spalte. */
.ch-hero__profil {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--sh-space-sm);
    align-content: start;
    padding-top: var(--sh-space-md);
    border-top: 1px solid var(--sh-border);
    min-width: 0;
}

@media (max-width: 900px) {
    .ch-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sh-space-md);
        padding: var(--sh-space-md);
    }
}

/* ---------------------------------------------------------------- Portrait */

/* Festes Seitenverhaeltnis statt fester Hoehe: Alle Portraits wirken gleich,
   unabhaengig vom Zuschnitt des Originals. Fehlt eines, bleibt die Flaeche
   erhalten — eine eingeklappte Karte saehe aus wie ein Fehler. */
.ch-portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--sh-radius);
    background: linear-gradient(155deg, var(--sh-surface-2), var(--sh-bg-2));
}

.ch-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Der Bildschwerpunkt schlaegt die Vorgabe.
       --sh-focus setzt die Ansicht an .ch-portrait, sobald am Bild ein Schwerpunkt
       hinterlegt ist (ImageFocusService.StilName). Ohne ihn greift der Rueckfallwert,
       und der Bogen sieht aus wie vorher.
       Bis zum 25.08.2026 stand hier ein FESTER Wert. Die Kachel wertete den Schwerpunkt
       damit aus, der Bogen nicht — wer im Ausschnitt-Editor den Kopf einstellte, sah die
       Wirkung in der Vorschau und in der Liste, aber nie auf dem Bogen selbst.
       Leicht oberhalb der Mitte als Rueckfall: Bei Figuren steht dort meist der Kopf. */
    object-position: var(--sh-focus, center 30%);
    display: block;
}

.ch-portrait__empty {
    display: grid;
    place-items: center;
    gap: var(--sh-space-xs);
    height: 100%;
    padding: var(--sh-space-md);
    color: var(--sh-text-faint);
    text-align: center;
    font-size: .78rem;
}

/* Kennzeichen auf dem Bild. Dunkler Grund, damit sie auch auf hellen Portraits
   lesbar bleiben. */
.ch-portrait__tag {
    position: absolute;
    top: var(--sh-space-xs);
    z-index: 1;
    padding: .12rem .4rem;
    border-radius: 3px;
    backdrop-filter: blur(2px);
    background: rgb(0 0 0 / .58);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ch-portrait__tag--start { left: var(--sh-space-xs); }
.ch-portrait__tag--end { right: var(--sh-space-xs); }
.ch-portrait__tag:empty { display: none; }

/* ------------------------------------------------------------------- Name */

.ch-identity { display: grid; gap: var(--sh-space-sm); min-width: 0; }

/* Schriftstufe 1. Dieselben Werte wie .ch-figurname, deshalb in einer Regel —
   zwei getrennte Definitionen liefen mit der Zeit auseinander. */
.ch-identity__name {
    margin: 0;
    font-size: clamp(1.55rem, 2.7vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.12;
    color: var(--sh-text);
}

.ch-identity__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-xs) var(--sh-space-sm);
    font-size: .92rem;
    color: var(--sh-text-dim);
}

.ch-identity__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-space-xs);
}

/* ==================================================== Schnellfakten-Gruppen */

/* Gruppen statt einer Schluessel-Wert-Tabelle: Vierzehn Zeilen untereinander liest
   niemand. Vier benannte Gruppen mit je drei bis fuenf Angaben schon.

   auto-fit statt auto-fill: Bei wenigen Gruppen — etwa wenn eine Figur kaum
   gepflegt ist — sollen die vorhandenen die Breite nutzen und nicht als schmale
   Saeule links kleben. */
.ch-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: var(--sh-space-md);
    margin-top: var(--sh-space-xs);
}

.ch-facts__group { display: grid; gap: .3rem; align-content: start; min-width: 0; }

/* Schriftstufe 4 an der Gruppe. */
.ch-facts__title {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

.ch-fact {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--sh-space-xs);
    font-size: .82rem;
    line-height: 1.45;
}

.ch-fact__key { color: var(--sh-text-faint); white-space: nowrap; }
.ch-fact__value { min-width: 0; overflow-wrap: anywhere; }

/* ======================================================= Wertetafel Macht */

/* Machtstufe und Machtskala stehen nebeneinander und niemals ineinander:
   S+ ist keine Weltklasse, und „Unermesslich" ist keine Stufe. Wer beides in eine
   Zeile schreibt, erzeugt genau diese Verwechslung. */
.ch-power {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
    gap: var(--sh-space-sm);
}

.ch-power__cell {
    display: grid;
    gap: .15rem;
    align-content: start;
    padding: var(--sh-space-sm) var(--sh-space-xs);
    border: 1px solid var(--sh-border);
    /* Goldene Haarlinie oben: Macht und Rang sind Gold, und die Linie sagt das,
       bevor man die Zahl gelesen hat (REQ-CHAR-051). */
    border-top: 2px solid color-mix(in srgb, var(--sh-gold) 34%, transparent);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
    text-align: center;
    min-width: 0;
}

/* Beschriftung klein DARUEBER, Zahl darunter — die Reihenfolge im Markup ist
   dieselbe. Wer zuerst die Zahl sieht und dann sucht, wozu sie gehoert, liest
   zweimal. */
.ch-power__label {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

.ch-power__value {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--sh-gold);
    overflow-wrap: anywhere;
}

.ch-power__value--muted { color: var(--sh-text-faint); font-size: 1.1rem; }

.ch-power__hint { font-size: .64rem; color: var(--sh-text-faint); }

/* Der historische Altwert. Er sieht bewusst anders aus als die aktuellen Zellen —
   sonst liest ihn jemand als heutigen Stand (REQ-CHAR-043). Gestrichelt und in
   Orange, der Farbe fuer Pruefung und Altbestand; „Altwert" steht als Wort daneben,
   damit die Farbe nicht allein traegt. */
.ch-power__legacy {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sh-space-xs) var(--sh-space-sm);
    padding: var(--sh-space-xs) var(--sh-space-sm);
    border: 1px dashed color-mix(in srgb, var(--sh-warn) 45%, var(--sh-border-strong));
    border-radius: var(--sh-radius);
    font-size: .76rem;
    color: var(--sh-text-dim);
}

/* ------------------------------------------------- Allgemeine Wertetafel */

/* Dieselbe Bauform wie das Machtprofil, aber mit der Farbe des umgebenden
   Bereichs. Fuer Punktbudgets, Zaehler und andere Kennzahlen ausserhalb der Macht —
   damit dafuer niemand .ch-power zweckentfremdet und Gold dort auftaucht, wo es
   nichts bedeutet. */
.ch-tafel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
    gap: var(--sh-space-sm);
    min-width: 0;
}

.ch-tafel__zelle {
    display: grid;
    gap: .15rem;
    align-content: start;
    padding: var(--sh-space-sm) var(--sh-space-xs);
    border: 1px solid var(--sh-border);
    border-top: 2px solid var(--ch-akzent-linie, var(--sh-border-strong));
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
    text-align: center;
    min-width: 0;
}

.ch-tafel__marke {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

.ch-tafel__zahl {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ch-akzent, var(--sh-text));
}

.ch-tafel__zusatz { font-size: .64rem; color: var(--sh-text-faint); }

/* ================================================================ Zustaende */

/* Die Zustandssysteme sind fachlich verschieden und bleiben deshalb getrennt
   sichtbar. Sie in ein Feld „Status" zu falten war der Ausgangszustand und ist
   genau das, was REQ-CHAR-044 verbietet. */
.ch-states {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: var(--sh-space-sm);
}

.ch-state { display: grid; gap: .2rem; min-width: 0; }

.ch-state__label {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

.ch-state__value { display: flex; flex-wrap: wrap; gap: var(--sh-space-xs); }

/* ------------------------------------------------------------ Lebenspunkte
   Der Balken ist eine Zweitangabe. Die Zahl daneben trägt die Aussage; die
   Farbe hilft beim schnellen Blick und ist nie der einzige Träger einer
   Information (REQ-UX-015).

   Bei „unermesslich" erscheint hier gar nichts — ein Balken ohne Obergrenze
   müsste eine erfinden. Diese Fälle rendert die Ansicht als Wort. */
.ch-state--breit { grid-column: span 2; }

.ch-leben { display: flex; align-items: center; gap: var(--sh-space-xs); width: 100%; }

.ch-leben__balken {
  position: relative;
  flex: 1 1 auto;
  min-width: 80px;
  height: 9px;
  border-radius: 999px;
  background: var(--sh-surface-3, rgba(255,255,255,.08));
  overflow: hidden;
}

.ch-leben__fuellung {
  height: 100%;
  border-radius: 999px;
  /* Kein Übergang unter „prefers-reduced-motion" — siehe unten. */
  transition: width .25s ease;
}

.ch-leben__fuellung--gut      { background: var(--sh-green,  #4f9d69); }
.ch-leben__fuellung--knapp    { background: var(--sh-amber,  #c9973f); }
.ch-leben__fuellung--kritisch { background: var(--sh-red,    #b4515f); }

.ch-leben__zahl {
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  color: var(--sh-text-2, #a8abb5);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ch-leben__fuellung { transition: none; }
}

/* ============================================================== Kartenfeld */

/* Karten fliessen nach Inhalt. dense fuellt Luecken, die eine breite Karte sonst
   hinterlaesst — ohne das entstehen die Leerflaechen, die den Ausgangszustand
   gepraegt haben.

   Das Kartenfeld ist die dritte Ebene und die Ausnahme: Es kommt dort zum Einsatz,
   wo Inhalte tatsaechlich gleichrangig nebeneinanderstehen. Fuer die Gliederung
   eines Bereichs sind .ch-bloecke zustaendig. */
.ch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    grid-auto-flow: row dense;
    gap: var(--sh-gap);
    align-items: start;
}

/* Bereiche mit viel Inhalt duerfen breiter stehen. Nur wenn ueberhaupt Platz da
   ist — auf schmalen Geraeten faellt die Regel weg. */
@media (min-width: 1100px) {
    .ch-grid__wide { grid-column: span 2; }
}

/* Ultrawide: mehr Breite je Karte statt immer mehr schmaler Spalten. Sechs
   Mini-Karten nebeneinander liest niemand besser als drei breite. */
@media (min-width: 1700px) {
    .ch-grid { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }
}

.ch-card__more {
    margin-top: var(--sh-space-sm);
    font-size: .76rem;
}

/* Eine Aufzaehlung von Werten, wie sie in fast jedem Bereich vorkommt:
   Fertigkeiten, Faehigkeiten, Staerken. Umbruch statt Abschneiden — ein halber
   Name sagt nichts. */
.ch-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-space-xs);
}

.ch-list__item {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .16rem .45rem;
    border: 1px solid var(--sh-border);
    border-radius: 3px;
    background: var(--sh-surface-2);
    font-size: .78rem;
}

/* Der Zahlenwert an einer Marke folgt dem Akzent des Bereichs: in „Kraefte"
   violett, in „Werte und Macht" gold. Ohne Akzentklasse bleibt es Tuerkis. */
.ch-list__value { font-weight: 700; color: var(--ch-akzent, var(--sh-accent)); font-variant-numeric: tabular-nums; }

/* ========================================================== Attributraster */

/* Neun Attribute als Raster, drei mal drei (REQ-CHAR-053). Grosse Zahl, kleines
   Kuerzel darueber.

   Vorher standen hier 1.05rem — optisch eine Tabellenzeile mit Rahmen. Die
   Attribute sind aber der meistgelesene Wert der ganzen Seite; sie muessen aus
   zwei Metern Abstand erkennbar sein. Deshalb rund 2rem, Ziffern in fester Breite,
   damit die Spalten trotz unterschiedlicher Zahlen buendig bleiben. */
.ch-attrs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sh-space-sm);
}

.ch-attr {
    display: grid;
    gap: .1rem;
    align-content: start;
    padding: var(--sh-space-sm) var(--sh-space-xs);
    border: 1px solid var(--sh-border);
    /* Tuerkiser Grundakzent: Attribute gehoeren zur Identitaet (REQ-CHAR-051). */
    border-top: 2px solid var(--sh-accent-line);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
    text-align: center;
    min-width: 0;
}

.ch-attr__abbr {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

.ch-attr__value {
    font-size: 1.95rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.ch-attr__mod { font-size: .64rem; color: var(--sh-text-faint); font-variant-numeric: tabular-nums; }

/* Farbstaffelung als Ergaenzung, niemals als einzige Aussage — der Wert steht
   immer als Zahl daneben (REQ-UX-015). */
.ch-attr__value--none { color: var(--sh-text-faint); }
.ch-attr__value--base { color: var(--sh-text); }
.ch-attr__value--high { color: var(--sh-accent); }
.ch-attr__value--peak { color: var(--sh-gold); }

/* Hohe Werte wirken dezent staerker: nur die Kopflinie zieht nach. Kein Leuchten
   und keine gefuellte Flaeche — sonst liest man das Raster als Warnung statt als
   Wertung. Die Stufe steht am Wert, deshalb :has() statt einer zweiten Klasse am
   Kaestchen; das erspart dem Markup einen doppelt gepflegten Zustand. */
.ch-attr:has(.ch-attr__value--none) { border-top-color: var(--sh-border); }
.ch-attr:has(.ch-attr__value--high) { border-top-color: var(--sh-accent); }
.ch-attr:has(.ch-attr__value--peak) { border-top-color: var(--sh-gold); }

@media (max-width: 480px) {
    .ch-attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ch-attr__value { font-size: 1.7rem; }
}

/* ======================================================= Gegenueberstellung */

/* Staerken gegen Schwaechen. Zwei Spalten nebeneinander, weil der Vergleich die
   Aussage ist — untereinander gelesen sind es zwei Listen, nebeneinander ein Bild
   der Figur (REQ-CHAR-050).

   Gruen links, Orange rechts. Das ueberschneidet sich absichtlich nicht mit Rot:
   Eine Schwaeche ist keine Gefahr, sondern eine Eigenschaft. Und weil Farbe nie
   allein traegt, steht die Ueberschrift immer daneben. */
.ch-gegenueber {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sh-space-md);
    align-items: start;
    min-width: 0;
}

@media (max-width: 720px) {
    .ch-gegenueber { grid-template-columns: minmax(0, 1fr); }
}

.ch-gegenueber__seite {
    display: grid;
    gap: var(--sh-space-sm);
    align-content: start;
    padding: var(--sh-space-sm) var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-left: 2px solid var(--sh-border-strong);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
    min-width: 0;
}

.ch-gegenueber__seite--staerke { border-left-color: var(--sh-success); }
.ch-gegenueber__seite--schwaeche { border-left-color: var(--sh-warn); }

.ch-gegenueber__titel {
    margin: 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sh-text-dim);
}

.ch-gegenueber__seite--staerke .ch-gegenueber__titel { color: var(--sh-success); }
.ch-gegenueber__seite--schwaeche .ch-gegenueber__titel { color: var(--sh-warn); }

/* ============================================================ Namensmarken */

/* Bindungen sind Namen, keine Werte. Deshalb Marken statt Listenzeilen: Man
   ueberfliegt zwoelf Namen in einer Reihe schneller als zwoelf Zeilen, und die
   Rolle steht klein dabei — „Aldo · Adoptivsohn", nicht „Aldo Adoptiv". */
.ch-marken {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-space-xs);
    min-width: 0;
}

.ch-marke {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    max-width: 100%;
    padding: .22rem .5rem;
    border: 1px solid var(--sh-border);
    /* Blau: Welt, Herkunft und Bindungen. Innerhalb eines Bereichs mit eigener
       Akzentklasse folgt die Marke dessen Farbe. */
    border-left: 2px solid var(--ch-akzent, var(--sh-blue));
    border-radius: 3px;
    background: var(--sh-surface-2);
    color: var(--sh-text);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.ch-marke__rolle {
    font-size: .66rem;
    color: var(--sh-text-faint);
    white-space: nowrap;
}

/* Anklickbare Marke. Bewusst ein <button> und kein <a>: Der Sprung wechselt den
   Bereich innerhalb derselben Seite. Die Zuruecksetzung ist noetig, weil ein
   <button> sonst Systemschrift und eigenen Rahmen mitbringt. */
.ch-marke--verweis {
    font: inherit;
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
}

.ch-marke--verweis:hover {
    border-color: var(--sh-border-strong);
    border-left-color: var(--ch-akzent, var(--sh-blue));
    color: var(--ch-akzent, var(--sh-blue));
}

.ch-marke--verweis:focus-visible {
    outline: 2px solid var(--sh-accent);
    outline-offset: 2px;
}

/* ================================================== Verweis in einer Tabelle */

/* Eine Schaltflaeche, die wie ein Verweis aussieht.

   Bewusst ein <button> und kein <a>: Der Sprung wechselt den Bereich innerhalb
   derselben Seite und laedt nichts nach. Ein <a href> muesste eine Adresse
   versprechen, die es so nicht gibt — und wer ihn in einem neuen Fenster oeffnete,
   landete auf der Startseite.

   Aussehen und Bedienbarkeit muessen trotzdem stimmen: Zeiger, Unterstreichung beim
   Ueberfahren, sichtbarer Fokusring (REQ-UX-016). */
.sh-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--sh-accent);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sh-linkbtn:hover { text-decoration: underline; }

.sh-linkbtn:focus-visible {
    outline: 2px solid var(--sh-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============================================================== Stammbaum */

/* Ein kleiner Stammbaum statt einer Reihe gleichrangiger Namen.

   Eine flache Liste verschweigt genau das, worum es bei Verwandtschaft geht: wer
   ueber, neben und unter wem steht. „Aldo Narcor, Killy" sagt nicht, dass der eine
   ein Adoptivsohn und die andere eine Tochter ist.

   Bewusst schlicht gehalten — das ist die Zusammenfassung auf der Uebersicht, nicht
   die Familienansicht. Dort steht der vollstaendige Baum. */
.ch-tree { display: grid; gap: .2rem; }

.ch-tree__label {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
    margin-top: var(--sh-space-xs);
}

.ch-tree__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-space-xs);
}

/* Die senkrechte Linie zwischen den Reihen. Rein zeichnerisch und deshalb fuer
   Vorlesewerkzeuge ausgeblendet — sie traegt keine Aussage, die nicht schon in der
   Ueberschrift der Reihe steht. */
.ch-tree__stem {
    width: 2px;
    height: 12px;
    margin-left: 1.1rem;
    background: var(--sh-border-strong);
}

.ch-tree__node {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .18rem .5rem;
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
    font-size: .8rem;
}

/* Der betrachtete Charakter hebt sich ab: Er ist der Bezugspunkt, von dem aus alle
   Bezeichnungen gelten. */
.ch-tree__node--self {
    border-color: var(--sh-accent-line);
    background: var(--sh-accent-soft);
    color: var(--sh-accent);
    font-weight: 700;
}

.ch-tree__node--link { cursor: pointer; }
.ch-tree__node--link:hover { border-color: var(--sh-border-strong); }
.ch-tree__node--link:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; }

.ch-tree__kind { font-size: .68rem; color: var(--sh-text-faint); }

/* Adoption wird gekennzeichnet, aber nicht hervorgehoben: Sie ist eine vollwertige
   Verwandtschaft und keine Einschraenkung. Die Beschriftung steht am KIND und
   ausgeschrieben — „Adoptivsohn von Ember" —, niemals als angehaengtes Wort am
   Elternteil. */
.ch-tree__adoptive { font-size: .66rem; color: var(--sh-accent); }

/* ========================================================== Untergliederung */

/* Die zweite Reiterebene. Bewusst leiser als die erste: Sie ordnet innerhalb einer
   Gruppe und soll nicht mit ihr um Aufmerksamkeit streiten. Deshalb kein Kasten,
   sondern nur eine Unterstreichung beim aktiven Eintrag.

   Umbruch statt Bildlauf: Eine waagerechte Leiste, die man schieben muss, versteckt
   genau die Eintraege, die man sucht (REQ-UX-021).

   Sie erscheint ausschliesslich innerhalb des gewaehlten Hauptbereichs — zwei
   dauerhaft sichtbare Reiterzeilen sind ausgeschlossen (REQ-CHAR-056). */
.ch-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-space-xs);
    padding: var(--sh-space-xs) 0 0;
    margin-top: calc(var(--sh-space-xs) * -1);
}

.ch-subtab {
    padding: .25rem .6rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--sh-text-dim);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.ch-subtab:hover { color: var(--sh-text); }

/* Der aktive Eintrag folgt dem Akzent des Bereichs, in dem er steht — in
   „Kraefte" violett, in „Welt und Bindungen" blau. Das bindet die Untergliederung
   sichtbar an ihren Bereich, statt sie ueberall gleich tuerkis zu faerben. */
.ch-subtab.is-active {
    border-bottom-color: var(--ch-akzent, var(--sh-accent));
    color: var(--ch-akzent, var(--sh-accent));
    font-weight: 600;
}

.ch-subtab:focus-visible {
    outline: 2px solid var(--sh-accent);
    outline-offset: 1px;
}

/* ============================================================= Leerzustand */

/* Hoechstens zwei Zeilen plus Schaltflaeche (REQ-CHAR-059). Kein place-items,
   keine Mindesthoehe, kein Symbol in der Mitte: Genau daraus entstehen die grossen
   leeren Flaechen, die eine gepflegte Figur aussehen lassen wie eine leere.

   Gestrichelter Rahmen statt durchgezogener, damit der Kasten nicht mit einer
   gefuellten Karte verwechselt wird. */
.ch-leer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-xs) var(--sh-space-md);
    padding: var(--sh-space-sm) var(--sh-space-md);
    border: 1px dashed var(--sh-border-strong);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
    min-width: 0;
}

.ch-leer__text {
    flex: 1 1 14rem;
    min-width: 0;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--sh-text-dim);
}

.ch-leer__aktion {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Einzeiliger Hinweis innerhalb einer Karte: ehrlich benennen statt die Karte
   wegzulassen. Eine fehlende Karte laesst offen, ob es die Angabe nicht gibt oder
   ob sie vergessen wurde. Fuer Faelle ohne naechsten Schritt — sonst .ch-leer. */
.ch-empty {
    font-size: .78rem;
    color: var(--sh-text-faint);
    font-style: italic;
}

/* ================================================================ Responsiv */

/* Ultrawide nutzt die Breite, statt den Inhalt in einer Saeule zu lassen: mehr
   Luft im Bereich, damit die groesseren Flaechen nicht an den Kanten kleben.
   Die Gesamtbreite deckelt bereits .sh-main__inner in app.css. */
@media (min-width: 1600px) {
    .ch-bereich__kopf { padding: var(--sh-space-sm) var(--sh-space-xl); }
    .ch-bereich__inhalt { padding: var(--sh-space-lg) var(--sh-space-xl); }
    .ch-bereich__fuss { padding: var(--sh-space-sm) var(--sh-space-xl); }
    .ch-hero { padding: var(--sh-space-xl); }
}

/* Tablet und Telefon: Innenabstaende zurueck, sonst bleibt vom Inhalt zu wenig
   uebrig. Der Abstand ZWISCHEN den Bereichen schrumpft weniger stark als der
   darin — die Rangfolge muss auch auf dem Telefon erkennbar bleiben. */
@media (max-width: 760px) {
    .ch-bereiche { gap: var(--sh-space-lg); }
    .ch-bereich__kopf { padding: var(--sh-space-sm) var(--sh-space-md); }
    .ch-bereich__inhalt { padding: var(--sh-space-md); }
    .ch-bereich__fuss { padding: var(--sh-space-sm) var(--sh-space-md); }
    .ch-bereich--leise .ch-bereich__inhalt { padding: var(--sh-space-sm) var(--sh-space-md); }
    .ch-spalten { gap: var(--sh-space-md); }
}

/* Letzte Sicherung gegen waagerechten Bildlauf (REQ-UX-021): Lange Namen ohne
   Leerzeichen — Ortsnamen, Blutlinien, Schluesselwerte — sprengen sonst das
   Raster, weil ein Rasterelement von Haus aus nicht unter seine Inhaltsbreite
   faellt. */
@media (max-width: 520px) {
    .ch-bereich,
    .ch-bereich__inhalt,
    .ch-hero,
    .ch-facts,
    .ch-states,
    .ch-grid { min-width: 0; overflow-wrap: anywhere; }
}