/* ===========================================================================
   Lore — der Lesebereich des internen Nachschlagewerks.

   Eigene Datei und kein Anhang an app.css, aus demselben Grund wie beim Wizard
   und beim Charakterdetail (REQ-UX-019): Der Bereich hat genug eigene Bausteine,
   um sie beieinander zu halten.

   Der Ausgangspunkt war eine Wand aus einundachtzig gleichartigen Klappzeilen.
   Jede trug elf bis vierzehn Kennzeichen vor dem ersten Satz, darunter bis zu
   zwei Warnkaesten, und auf 73 Prozent von ihnen stand derselbe Satz „kein Beleg
   hinterlegt". Der Nutzer nannte das „Debugoutput eines Markdown-Imports", und
   die Beschreibung trifft: Gezeigt wurde, was der Importer weiss, nicht, was in
   der Welt gilt.

   Vier Entscheidungen tragen diese Datei:

   Erstens — DREI STUFEN statt einer Liste (REQ-LORE-037). Kategorie, dann Liste,
   dann Artikel. Auf jeder Stufe steht genau so viel, wie man zum naechsten Schritt
   braucht. Die Kategoriekarte zeigt eine Zahl, die Listenzeile einen Satz, der
   Artikel den Text.

   Zweitens — EIN KENNZEICHEN je Eintrag (REQ-LORE-036). Der Rang steht als Wort
   da, mit Zeichen und Farbe nur als Zugabe (REQ-UX-015). Er faerbt die linke Kante
   der Listenzeile und die Kopflinie des Artikels — er bekommt keinen eigenen
   Kasten und keine zweite, dritte, vierte Wiederholung.

   Drittens — KONTEXT NEBEN DEN TEXT (REQ-LORE-042). Der Artikel ist zweispaltig:
   links der Text mit begrenzter Lesebreite, rechts Einordnung, Quellen und
   Verknuepfungen. Auf schmalen Geraeten faellt die Kontextspalte unter den Text.

   Viertens — FARBE SPARSAM. Vier Kategorieakzente, nicht vierzehn. Rot nur bei
   einem echten Widerspruch. Die Farben stammen aus den Tokens in app.css; hier
   steht keine Hexfarbe.

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

   LEITWEG UND KOPF
     .lore-weg                 Brotkrume ueber dem Inhalt
     .lore-weg__stufe          Eine anklickbare Stufe (immer ein <button>)
     .lore-weg__hier           Die aktuelle Stufe, nicht anklickbar
     .lore-weg__pfeil          Trennzeichen zwischen zwei Stufen
     .lore-modus               Umschaltung Lesen/Pruefen (REQ-LORE-035)
     .lore-modus__knopf        Eine der beiden Schaltflaechen
     .lore-modus__knopf.is-active   Der gewaehlte Modus

   KATEGORIEUEBERSICHT (Stufe 1)
     .lore-regale              Raster der Kategoriekarten
     .lore-regal               Eine Kategoriekarte (immer ein <button>)
     .lore-regal__zahl         Die Anzahl, gross und in der Akzentfarbe
     .lore-regal__titel        Name der Kategorie
     .lore-regal__fein         Die feinen Kategoriewortlaute der Quelldatei
     .lore-regal__rang         Rangverteilung als kleine Zeile

   KATEGORIEAKZENT — auf .lore-regal
     .lore-fach--welt          Blau    Welt, Politik, Orte, Gesellschaft
     .lore-fach--magie         Violett Magie und Artefakte
     .lore-fach--zeit          Gold    Geschichte, Ereignisse, Personen
     .lore-fach--frage         Orange  Offene Arbeitsfragen
     .lore-fach--neutral       Ohne Akzent

   LISTE (Stufe 2)
     .lore-liste               Stapel der Listenzeilen
     .lore-eintrag             Eine Zeile (immer ein <button>), Rangkante links
     .lore-eintrag__kopf       Titelzeile
     .lore-eintrag__titel      Der Titel
     .lore-eintrag__text       Kurzfassung, auf zwei Zeilen begrenzt
     .lore-eintrag__fuss       Kennung und Rangwort, leise

   RANG — auf .lore-eintrag, .lore-artikel, .lore-rang, .lore-punkt
     .lore-rang--kanon         Gruen    geltender Kanon
     .lore-rang--historisch    Blau     historisch belegt
     .lore-rang--kandidat      Gold     Kanonkandidat
     .lore-rang--pruefung      Orange   prueft noch aus
     .lore-rang--verworfen     Rot      verworfen
     .lore-rang--offen         Neutral  ohne Status, archiviert
     .lore-rang                Rangzeile: Zeichen und Wort, dezent
     .lore-rang__zeichen       Das Zeichen vor dem Wort

   ARTIKEL (Stufe 3)
     .lore-artikel             Zweispaltiges Raster: Text und Kontext
     .lore-artikel__text       Textspalte mit begrenzter Lesebreite
     .lore-artikel__kontext    Kontextspalte, klebend
     .lore-kopf                Kopf des Artikels, Rangkante oben
     .lore-titel               Artikelueberschrift (Schriftstufe 1)
     .lore-vorspann            Kurzfassung, gehoben ueber dem Haupttext
     .lore-fliess              Haupttext aus BbCode.ToHtml; p, ul, ol, blockquote, h3-h6,
                               hr, strong, em, code
     .lore-notiz               Etikettierter Hinweiskasten des Dienstes
     .lore-notiz__etikett      Das Etikett („Wichtig", „Offen", „Hinweis")
     .lore-notiz--wichtig      Gold
     .lore-notiz--offen        Orange
     .lore-notiz--konflikt     Rot, nur bei einem echten Widerspruch

   KONTEXTSPALTE
     .lore-kontext             Stapel der Kontextbloecke
     .lore-block               Ein Block ohne eigenen Kasten, Haarlinie darueber
     .lore-block__titel        Untertitel des Blocks
     .lore-fakt                Eine Angabe aus Bezeichnung und Wert
     .lore-fakt__name          Bezeichnung
     .lore-fakt__wert          Wert
     .lore-quelle              Eine Quellenangabe
     .lore-quelle__name        Name der Quelle
     .lore-quelle__fund        Fundstelle
     .lore-quelle__meta        Datum und Notiz
     .lore-quelle__sprecher    Der eine Sprecher der Quelle (LORE-014)
     .lore-quelle__zeit        Uhrzeit oder Zeitraum
     .lore-quelle__art         Beitragsart im Wort
     .lore-marken              Marken nebeneinander mit Umbruch

   CHRONIK (REQ-LORE-039)
     .lore-chronik             Der Zeitstrang
     .lore-punkt               Ein Ereignis am Strang
     .lore-punkt--stumm        Ohne beschreibenden Eintrag, kein Klickziel
     .lore-punkt__datum        Belegtes Datum, bleibt leer wenn keines vorliegt
     .lore-punkt__kennung      Die Kennung des Ereignisses, einbreit
     .lore-punkt__titel        Titel des Ereignisses
     .lore-punkt__text         Kurzfassung

   OFFENE ARBEITSFRAGEN (REQ-LORE-038)
     .lore-fragen              Stapel der Fragen
     .lore-frage               Eine Frage (immer ein <button>)
     .lore-frage__kennung      Die Kennung

   EINZEILIGE ERKLAERUNG
     .lore-hinweis             Ein Satz ueber einer Liste, leise; steht genau einmal
     .lore-hinweis--warn       Derselbe Satz, wenn er eine Luecke benennt

   PRUEFANGABEN (REQ-LORE-035)
     .lore-pruef               Block, der nur im Pruefmodus erscheint
     .lore-pruef__marke        „Pruefmodus" als Aufschrift am Block
     .lore-roh                 Wortlaut der Quelldatei, einbreit gesetzt

   BESTEHENDE BAUSTEINE, die hier weiter benutzt werden: .sh-page-head,
   .sh-card, .sh-chip, .sh-btn, .sh-search, .sh-alert, .sh-note, .sh-empty,
   .sh-loading, .sh-stack, .sh-row und die Abstands- und Textklassen aus app.css.
   =========================================================================== */

/* ============================================================== Leitweg */

/* Die Brotkrume ist der Ersatz fuer das Aufklappen. Sie beantwortet zwei Fragen,
   die eine Klappzeile offen laesst: wo bin ich, und wie komme ich zurueck. */
.lore-weg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-xs);
    margin-bottom: var(--sh-space-md);
    font-size: .78rem;
    min-width: 0;
}

.lore-weg__stufe {
    appearance: none;
    border: 0;
    background: none;
    padding: .1rem .2rem;
    margin: 0;
    font: inherit;
    color: var(--sh-text-dim);
    cursor: pointer;
    border-radius: var(--sh-radius);
}

.lore-weg__stufe:hover { color: var(--sh-accent); }

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

.lore-weg__hier {
    padding: .1rem .2rem;
    color: var(--sh-text);
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.lore-weg__pfeil {
    color: var(--sh-text-faint);
    user-select: none;
}

/* ====================================================== Lesen und Pruefen */

/* Zwei Schaltflaechen in einer Fassung, nicht ein Schalter ohne Beschriftung.
   Welcher Modus laeuft, muss als Wort dastehen (REQ-UX-015).

   Ohne das Recht Lore.Edit wird dieser Baustein gar nicht erst gezeichnet — auch
   nicht ausgegraut (REQ-LORE-035). Ein ausgegrauter Schalter behauptet, es gaebe
   dort etwas zu holen. */
.lore-modus {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-surface);
    overflow: hidden;
}

.lore-modus__knopf {
    appearance: none;
    border: 0;
    background: none;
    margin: 0;
    padding: .28rem .7rem;
    font: inherit;
    font-size: .78rem;
    color: var(--sh-text-dim);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.lore-modus__knopf + .lore-modus__knopf { border-left: 1px solid var(--sh-border); }
.lore-modus__knopf:hover { background: var(--sh-surface-2); color: var(--sh-text); }

.lore-modus__knopf:focus-visible {
    outline: 2px solid var(--sh-accent);
    outline-offset: -2px;
}

.lore-modus__knopf.is-active {
    background: var(--sh-accent-soft);
    color: var(--sh-accent);
    font-weight: 600;
}

/* ================================================= Kategorieuebersicht */

/* Die erste Stufe. Sie zeigt Faecher, keine Eintraege — genau das ist der
   Unterschied zwischen einem Nachschlagewerk und einer Ausgabeliste. */
.lore-regale {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: var(--sh-space-md);
    align-items: stretch;
}

.lore-regal {
    appearance: none;
    text-align: left;
    font: inherit;
    margin: 0;
    cursor: pointer;
    display: grid;
    gap: var(--sh-space-xs);
    align-content: start;
    padding: var(--sh-space-lg);
    min-width: 0;

    border: 1px solid var(--sh-border);
    /* Die Akzentlinie oben, wie beim Charakterbereich: zwei Pixel, weil einer im
       dunklen Grund verschwindet und vier eine Zierleiste waeren. */
    border-top: 2px solid var(--lore-akzent, var(--sh-border-strong));
    border-radius: var(--sh-radius-lg);
    background: var(--sh-surface);
    color: var(--sh-text);
    transition: border-color var(--sh-fast), background var(--sh-fast);
}

.lore-regal:hover {
    background: var(--sh-surface-2);
    border-color: var(--sh-border-strong);
    border-top-color: var(--lore-akzent, var(--sh-border-strong));
}

.lore-regal:focus-visible {
    outline: 2px solid var(--sh-accent);
    outline-offset: 2px;
}

.lore-regal__zahl {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--lore-akzent, var(--sh-text-dim));
}

.lore-regal__titel {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sh-text);
}

/* Der feine Wortlaut stammt woertlich aus der Quelldatei — „Ort / Schloss",
   „Geschichte / Politik". Er wird hier gezeigt und nicht durch eine erfundene
   Beschreibung ersetzt: Was ein Fach enthaelt, sagt die Quelle selbst besser als
   ein ausgedachter Satz (REQ-LORE-045). */
.lore-regal__fein {
    font-size: .76rem;
    line-height: 1.5;
    color: var(--sh-text-dim);
    overflow-wrap: anywhere;
}

.lore-regal__rang {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .5rem;
    font-size: .7rem;
    color: var(--sh-text-faint);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ Kategorieakzente */

/* Vier Akzente, nicht vierzehn. Jeder setzt eine einzige lokale Eigenschaft;
   Linie und Zahl lesen sie. Dadurch bleibt eine Kategorie unterscheidbar, ohne
   dass die Uebersicht ein Farbkasten wird. */
.lore-fach--welt { --lore-akzent: var(--sh-blue); }
.lore-fach--magie { --lore-akzent: var(--sh-purple); }
.lore-fach--zeit { --lore-akzent: var(--sh-gold); }
.lore-fach--frage { --lore-akzent: var(--sh-warn); }
.lore-fach--neutral { --lore-akzent: var(--sh-border-strong); }

/* ================================================================ Rang */

/* Der Kanonstatus faerbt eine Kante und ein Wort — sonst nichts. Fuenf
   gleichzeitige Kennzeichen fuer dieselbe Aussage waren der Grund, warum die
   alte Ansicht wie ein Fehlerbericht aussah (REQ-LORE-036). */
.lore-rang--kanon { --lore-rang: var(--sh-success); }
.lore-rang--historisch { --lore-rang: var(--sh-blue); }
.lore-rang--kandidat { --lore-rang: var(--sh-gold); }
.lore-rang--pruefung { --lore-rang: var(--sh-warn); }
.lore-rang--verworfen { --lore-rang: var(--sh-danger); }
.lore-rang--offen { --lore-rang: var(--sh-text-faint); }

/* Das Wort steht immer da. Die Farbe ist Zugabe, nie Traeger (REQ-UX-015). */
.lore-rang {
    display: inline-flex;
    align-items: baseline;
    gap: .28rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--lore-rang, var(--sh-text-faint));
}

.lore-rang__zeichen {
    font-size: .8rem;
    line-height: 1;
}

/* ============================================================== Liste */

.lore-liste {
    display: grid;
    gap: 1px;
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
    background: var(--sh-border);
    overflow: hidden;
}

/* Die Zeile ist die Huelle, nicht der Knopf. Sie traegt Rangkante, Grund und
   Auswahlzustand; darin steht links das Auswahlkaestchen und daneben die
   Schaltflaeche, die den Artikel oeffnet.

   Warum getrennt: Ein Kaestchen INNERHALB des Knopfes waere ein Bedienelement in
   einem Bedienelement — jeder Klick darauf oeffnete zugleich den Artikel, und
   Tastaturbedienung und Vorlesehilfen bekaemen einen Knopf, in dem ein zweites
   Bedienelement steckt (REQ-LORE-050, REQ-LORE-053). */
.lore-zeile {
    display: flex;
    align-items: stretch;
    min-width: 0;

    border-left: 3px solid var(--lore-rang, var(--sh-border-strong));
    background: var(--sh-surface);
    transition: background var(--sh-fast);
}

/* Der Grund gehoert der Zeile und nicht dem Knopf darin: Sonst uebermalte ein
   Zeigergrund die Auswahlfarbe, sobald jemand mit der Maus darueberfaehrt — und
   die ausgewaehlte Zeile saehe fuer diesen Augenblick unausgewaehlt aus. */
.lore-zeile:hover { background: var(--sh-surface-2); }

/* Die Auswahl faerbt die ganze Zeile und nicht nur das Kaestchen: In einer Liste
   aus achtzig Zeilen ist ein 15 Pixel breites Haekchen keine Rueckmeldung. */
.lore-zeile.is-gewaehlt { background: var(--sh-accent-soft); }
.lore-zeile.is-gewaehlt:hover { background: var(--sh-accent-line); }

/* Das Kaestchen sitzt in einem eigenen Label — die gesamte Flaeche links schaltet
   die Auswahl, statt ein Ziel von der Groesse eines Fingernagels zu verlangen. */
.lore-zeile__wahl {
    display: flex;
    align-items: center;
    padding: 0 var(--sh-space-sm) 0 var(--sh-space-md);
    cursor: pointer;
    flex: 0 0 auto;
}

.lore-zeile__wahl input {
    width: 15px;
    height: 15px;
    accent-color: var(--sh-accent);
    cursor: pointer;
    margin: 0;
}

.lore-zeile__wahl input:focus-visible {
    outline: 2px solid var(--sh-accent);
    outline-offset: 2px;
}

/* Eine Zeile traegt drei Dinge: Rangkante, Titel, ein Satz. Kein Zaehler, keine
   Evidenzmarken, kein Warnkasten — die gehoeren in den Artikel und dort genau
   einmal (REQ-LORE-036).

   flex/min-width 0: Der Knopf fuellt den gesamten Rest der Zeile, damit ein Klick
   irgendwo darauf den Artikel oeffnet und nicht nur einer auf den Titel
   (REQ-LORE-050). */
.lore-eintrag {
    appearance: none;
    text-align: left;
    font: inherit;
    margin: 0;
    cursor: pointer;
    display: grid;
    gap: .2rem;
    padding: var(--sh-space-md) var(--sh-space-lg);
    min-width: 0;
    flex: 1 1 auto;

    border: 0;
    background: transparent;
    color: var(--sh-text);
    transition: background var(--sh-fast);
}

.lore-eintrag:focus-visible {
    outline: 2px solid var(--sh-accent);
    outline-offset: -2px;
}

.lore-eintrag__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem var(--sh-space-sm);
    min-width: 0;
}

.lore-eintrag__titel {
    margin: 0;
    font-size: .96rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--sh-text);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Zwei Zeilen, dann Schluss. Eine Listenzeile, die den halben Artikel zeigt,
   macht die naechste Stufe ueberfluessig — und damit die Liste unuebersichtlich. */
.lore-eintrag__text {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--sh-text-dim);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lore-eintrag__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem var(--sh-space-sm);
    font-size: .7rem;
    color: var(--sh-text-faint);
}

.lore-eintrag__fuss code {
    font-family: var(--sh-font-mono);
    font-size: .95em;
}

/* ============================================================= Artikel */

/* Zwei Spalten: Text und Kontext. Die Trennung ist der Kern von REQ-LORE-042 —
   Status, Quellen und Verknuepfungen stehen NEBEN dem Text, nicht darin. In der
   alten Ansicht lagen sie als drei weitere Karten unter dem Absatz, und wer den
   Artikel las, scrollte an ihnen vorbei, ohne sie je zu brauchen. */
.lore-artikel {
    display: grid;
    grid-template-columns: minmax(0, 900px) minmax(260px, 320px);
    gap: var(--sh-space-xl);
    align-items: start;
    max-width: 1264px;
    min-width: 0;
}

.lore-artikel__text {
    min-width: 0;
    display: grid;
    gap: var(--sh-space-lg);
    align-content: start;
}

.lore-artikel__kontext {
    min-width: 0;
    position: sticky;
    top: var(--sh-space-md);
}

/* Unter 1100 Pixeln hat eine 300er Spalte neben 900 Pixeln Text keinen Platz
   mehr. Dann steht der Kontext unter dem Text — in derselben Reihenfolge, in der
   man ihn braucht: erst lesen, dann nachschlagen. */
@media (max-width: 1100px) {
    .lore-artikel {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sh-space-lg);
    }

    .lore-artikel__kontext {
        position: static;
        border-top: 1px solid var(--sh-border);
        padding-top: var(--sh-space-lg);
    }
}

/* ------------------------------------------------------------ Artikelkopf */

.lore-kopf {
    display: grid;
    gap: var(--sh-space-sm);
    padding-top: var(--sh-space-md);
    border-top: 2px solid var(--lore-rang, var(--sh-border-strong));
    min-width: 0;
}

/* Die oberste Schriftstufe des Bereichs. In der alten Ansicht stand der Titel
   als .sh-card__title da — 0.8rem, versal, matt — und damit kleiner und leiser
   als der Statuschip links daneben. Ein Nachschlagewerk, dessen Artikelname
   schwaecher gesetzt ist als sein Verwaltungskennzeichen, liest sich wie eine
   Fehlerliste. */
.lore-titel {
    margin: 0;
    font-size: clamp(1.45rem, 2.4vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--sh-text);
    overflow-wrap: anywhere;
}

/* Die Kurzfassung steht ueber dem Haupttext und wird NICHT in ihm wiederholt:
   Wo sie woertlich der erste Absatz ist, laesst die Ansicht diesen Absatz im
   Haupttext aus (REQ-LORE-033). */
.lore-vorspann {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--sh-text);
    padding-left: var(--sh-space-md);
    border-left: 2px solid var(--sh-border-strong);
}

/* ------------------------------------------------------------- Haupttext */

/* Begrenzte Lesebreite und ruhige Rangfolge (REQ-LORE-042). Die Breite ergibt
   sich aus der Spalte, nicht aus einer zweiten Regel hier — zwei Grenzen fuer
   dasselbe waeren die Stelle, an der sie auseinanderlaufen. */
.lore-fliess {
    font-size: 1.02rem;
    line-height: 1.72;
    color: var(--sh-text);
    min-width: 0;
}

.lore-fliess > * { margin: 0 0 .95em; }
.lore-fliess > :last-child { margin-bottom: 0; }

.lore-fliess h3 {
    margin: 1.5em 0 .5em;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--sh-text);
}

/* Der gemeinsame Auszeichnungsleser kennt seit dem 02.09.2026 vier Ueberschriftsstufen
   statt der einen, die der frueher hier eingebaute Leser kannte: Er zaehlt sie relativ
   zur obersten Stufe DES TEXTES. Im Bestand beginnt jeder Lesetext bei ##, also bleibt
   heute jede Ueberschrift eine h3 — aber sobald ein Text zwei Ebenen fuehrt, entsteht
   eine h4. Ohne diese Regel stuende sie in der Groesse des Browsers da. */
.lore-fliess h4,
.lore-fliess h5,
.lore-fliess h6 {
    margin: 1.2em 0 .4em;
    font-weight: 700;
    color: var(--sh-text-dim);
}

.lore-fliess h4 { font-size: .96rem; }
.lore-fliess h5,
.lore-fliess h6 { font-size: .9rem; }

/* Ebenso neu erreichbar: die Trennlinie. Drei Striche auf einer Zeile blieben im
   frueheren Leser als Text stehen und ergeben jetzt ein hr. */
.lore-fliess hr {
    height: 0;
    margin: 1.4em 0;
    border: 0;
    border-top: 1px solid var(--sh-border);
}

.lore-fliess ul,
.lore-fliess ol {
    padding-left: 1.35rem;
}

.lore-fliess li { margin-bottom: .32em; }
.lore-fliess li:last-child { margin-bottom: 0; }

.lore-fliess li::marker { color: var(--sh-text-faint); }

.lore-fliess blockquote {
    padding: .1rem 0 .1rem var(--sh-space-md);
    border-left: 2px solid var(--sh-border-strong);
    color: var(--sh-text-dim);
    font-style: italic;
}

.lore-fliess strong {
    font-weight: 700;
    color: var(--sh-text);
}

.lore-fliess code {
    font-family: var(--sh-font-mono);
    font-size: .88em;
    padding: .05em .3em;
    border-radius: 3px;
    background: var(--sh-surface-2);
    color: var(--sh-text-dim);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- Notizen */

/* Ein etikettierter Hinweis — „Wichtig", „Offen", „Aussage einer Figur", ein
   festgestellter Widerspruch (REQ-LORE-036, REQ-LORE-041).

   Er kommt aus dem DIENST: LoreService liest ihn aus ReviewNote und ConflictNote und
   reicht ihn als LoreNote durch. Bis zum 02.09.2026 erkannte die Ansicht daneben noch
   einen zweiten Weg — einen Absatz des Haupttextes, der mit „**Etikett:**" beginnt.
   Der ist entfallen: Er fiel auf ein Satzzeichen herein, nicht auf eine Bedeutung.
   Im ganzen Bestand traf er fuenf Absaetze, und vier davon waren gewoehnliche
   Saetze, deren fette Anfuehrung zufaellig auf einem Doppelpunkt endete statt auf
   einem Punkt — waehrend 122 gleichgebaute Nachbarabsaetze gewoehnliche Absaetze
   blieben. Ein Kasten, den die Zeichensetzung vergibt, ordnet nichts. */
.lore-notiz {
    display: grid;
    gap: .2rem;
    padding: var(--sh-space-sm) var(--sh-space-md);
    border-left: 2px solid var(--lore-notiz, var(--sh-border-strong));
    border-radius: 0 var(--sh-radius) var(--sh-radius) 0;
    background: var(--sh-surface-2);
    font-size: .92rem;
    line-height: 1.6;
    color: var(--sh-text-dim);
}

.lore-notiz__etikett {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--lore-notiz, var(--sh-text-faint));
}

.lore-notiz--wichtig { --lore-notiz: var(--sh-gold); }
.lore-notiz--offen { --lore-notiz: var(--sh-warn); }

/* Rot ist reserviert. Wer diese Klasse setzt, meint einen festgestellten
   Widerspruch — nichts sonst. */
.lore-notiz--konflikt { --lore-notiz: var(--sh-danger); }

/* ====================================================== Kontextspalte */

.lore-kontext {
    display: grid;
    gap: var(--sh-space-lg);
    align-content: start;
    min-width: 0;
}

/* Ein Block hat keinen eigenen Kasten, nur eine Haarlinie und einen Untertitel.
   Drei Kaesten untereinander waren in der alten Ansicht dreimal derselbe Rahmen
   — Gleichfoermigkeit erzeugt keine Rangfolge. */
.lore-block {
    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;
}

.lore-block:first-child {
    padding-top: 0;
    border-top: 0;
}

.lore-block__titel {
    margin: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

.lore-fakt {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .05rem;
    min-width: 0;
}

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

.lore-fakt__wert {
    font-size: .84rem;
    line-height: 1.45;
    color: var(--sh-text);
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- Quellen */

/* Frueher eine fuenfspaltige Tabelle mit eigenem Querlauf. In einer 300 Pixel
   breiten Spalte waere sie unlesbar, und sie war es auch vorher: Name,
   Fundstelle, Datum, Evidenz und Notiz nebeneinander ergeben fuenf leere Zellen,
   sobald eine Quelle nur ihren Namen kennt. Untereinander faellt Leeres weg. */
.lore-quelle {
    display: grid;
    gap: .12rem;
    padding-bottom: var(--sh-space-sm);
    border-bottom: 1px solid var(--sh-border-soft);
    min-width: 0;
}

.lore-quelle:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.lore-quelle__name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--sh-text);
    overflow-wrap: anywhere;
}

.lore-quelle__fund {
    font-size: .76rem;
    color: var(--sh-text-dim);
    overflow-wrap: anywhere;
}

.lore-quelle__meta {
    font-size: .7rem;
    color: var(--sh-text-faint);
}

/* Wer gesprochen hat, steht vor Uhrzeit und Art: Es ist die Angabe, nach der
   jemand eine Aussage in einem Jahr wiedersucht (LORE-014). */
.lore-quelle__sprecher {
    font-weight: 600;
    color: var(--sh-text-dim);
}

.lore-quelle__zeit {
    font-variant-numeric: tabular-nums;
}

.lore-quelle__art {
    font-style: italic;
}

.lore-marken {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    min-width: 0;
}

/* ============================================================= Chronik */

/* Ein Zeitstrang, keine Kartenliste (REQ-LORE-039). Die senkrechte Linie ist
   der Unterschied: Sie sagt, dass diese Eintraege eine Reihenfolge haben — und
   genau das ist die Aussage einer Chronik. */
.lore-chronik {
    display: grid;
    gap: 0;
    position: relative;
    padding-left: var(--sh-space-lg);
    min-width: 0;
}

.lore-chronik::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .7rem;
    bottom: .7rem;
    width: 1px;
    background: var(--sh-border-strong);
}

.lore-punkt {
    appearance: none;
    text-align: left;
    font: inherit;
    margin: 0;
    cursor: pointer;
    display: grid;
    gap: .15rem;
    padding: var(--sh-space-sm) var(--sh-space-sm) var(--sh-space-sm) var(--sh-space-md);
    border: 0;
    border-radius: var(--sh-radius);
    background: none;
    color: var(--sh-text);
    position: relative;
    min-width: 0;
    transition: background var(--sh-fast);
}

.lore-punkt::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--sh-space-lg) + 1px);
    top: 1.05rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lore-rang, var(--sh-border-strong));
    box-shadow: 0 0 0 3px var(--sh-bg);
}

button.lore-punkt:hover { background: var(--sh-surface); }

.lore-punkt:focus-visible {
    outline: 2px solid var(--sh-accent);
    outline-offset: -2px;
}

/* Ohne beschreibenden Eintrag fuehrt der Punkt nirgendwohin. Ein Klick, der nichts
   tut, ist schlechter als kein Klick — also gibt es hier keinen. */
.lore-punkt--stumm { cursor: default; }

/* Ohne belegtes Datum steht hier nichts. Ein Platzhalter wie „01.01.0001" oder
   „Datum unbekannt" an jedem der vierzehn Ereignisse waere genau die Wiederholung,
   die REQ-LORE-036 abstellt — und ein erfundenes Datum verbietet REQ-LORE-039. */
.lore-punkt__datum {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--sh-text-faint);
    font-variant-numeric: tabular-nums;
}

/* Solange die Quelle kein Datum fuehrt, traegt die Kennung die Reihenfolge —
   EVENT-001 vor EVENT-002. Sie steht als das da, was sie ist: eine Kennung, kein
   Datum. Sie in den Datumsplatz zu setzen hiesse, ein Datum zu behaupten. */
.lore-punkt__kennung {
    font-family: var(--sh-font-mono);
    font-size: .68rem;
    color: var(--sh-text-faint);
}

.lore-punkt__titel {
    margin: 0;
    font-size: .94rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--sh-text);
    overflow-wrap: anywhere;
}

.lore-punkt__text {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--sh-text-dim);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================================= Offene Arbeitsfragen */

/* Arbeitsfragen sind kein Wikiwissen (REQ-LORE-038). Sie stehen in einem eigenen
   Bereich, sichtbar anders gesetzt als ein Weltartikel, und nur fuer die Leitung.
   In der alten Ansicht landeten sie nach dem Freischalten als Kategorie „Regeln"
   zwischen den Weltartikeln und waren dort von einem Artikel nicht zu
   unterscheiden. */
.lore-fragen {
    display: grid;
    gap: var(--sh-space-sm);
    min-width: 0;
}

/* Gestrichelter Rahmen statt durchgezogenem: Eine Frage ist keine Aussage, und das
   soll man sehen, bevor man sie liest. Sie steht ausgeschrieben da und nicht hinter
   einem Klick — eine Arbeitsfrage ist ein bis zwei Saetze lang, und fuer zwoelf
   davon eine dritte Stufe zu bauen hiesse, zwoelfmal klicken zu lassen. */
.lore-frage {
    display: grid;
    gap: var(--sh-space-xs);
    padding: var(--sh-space-md);
    min-width: 0;

    border: 1px dashed var(--sh-warn);
    border-radius: var(--sh-radius);
    background: var(--sh-warn-soft);
    color: var(--sh-text);
}

/* Der Fliesstext einer Frage tritt gegenueber dem Artikel zurueck: Es ist eine
   Notiz zur Klaerung, kein Weltartikel. */
.lore-frage .lore-fliess {
    font-size: .88rem;
    line-height: 1.6;
}

.lore-frage__kennung {
    font-family: var(--sh-font-mono);
    font-size: .68rem;
    color: var(--sh-warn);
}

/* =================================================== Einzeilige Erklaerung */

/* Der eine Satz, der eine Liste einordnet — „in der Reihenfolge der Quelle",
   „kein Beleg hinterlegt". Er steht genau einmal ueber der Liste und nicht an
   jedem ihrer Eintraege (REQ-LORE-036). */
.lore-hinweis {
    margin: 0;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--sh-text-faint);
    display: flex;
    align-items: baseline;
    gap: .3rem;
}

.lore-hinweis--warn { color: var(--sh-warn); }

/* ========================================================== Pruefangaben */

/* Alles, was der Import weiss und der Leser nicht braucht: Rohwortlaute,
   Evidenzzuordnung, Pruefnotiz, Fassungszahl. Im Lesemodus wird es gar nicht
   gezeichnet, im Pruefmodus tritt es sichtbar zurueck — matter Grund, kein
   Akzent, kleinere Schrift (REQ-LORE-035). */
.lore-pruef {
    display: grid;
    gap: var(--sh-space-sm);
    padding: var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-bg-2);
    font-size: .8rem;
    color: var(--sh-text-dim);
    min-width: 0;
}

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

.lore-roh {
    font-family: var(--sh-font-mono);
    font-size: .74rem;
    color: var(--sh-text-dim);
    overflow-wrap: anywhere;
}

/* ========================================================== Massenpruefung */

/* Auswahlkopf, Aktionsleiste und Bestaetigungsdialog (LORE-010, REQ-LORE-053 bis
   REQ-LORE-063). Sie sind ausschliesslich im Pruefmodus und nur mit Lore.Publish
   ueberhaupt im Baum — der Lesebereich sieht von alledem nichts. */

/* „Alle sichtbaren auswaehlen" mit Anzahl, unmittelbar ueber der Liste, auf die es
   sich bezieht. Weiter oben — etwa neben der Suche — bezoege es sich sichtbar auf
   nichts. */
.lore-wahlkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem var(--sh-space-md);

    padding: var(--sh-space-sm) var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-bg-2);
}

/* Die Aktionsleiste klebt am unteren Rand des Inhalts. In einem Fach mit achtzig
   Eintraegen waere eine Leiste ueber der Liste nach dem dritten Bildlauf aus dem
   Bild — und die Auswahl faende ihren Knopf nicht wieder (REQ-LORE-055).

   sticky und nicht fixed: Sie gehoert in den Inhaltsfluss und darf die Navigation
   nicht ueberdecken. Der Scrollbehaelter ist .sh-main. */
.lore-aktionen {
    position: sticky;
    bottom: 0;
    z-index: 30;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sh-space-sm) var(--sh-space-md);

    margin-top: var(--sh-space-md);
    padding: var(--sh-space-sm) var(--sh-space-md);

    border: 1px solid var(--sh-accent-line);
    border-radius: var(--sh-radius-lg);
    background: var(--sh-surface);
    box-shadow: var(--sh-shadow-lg);
}

.lore-aktionen__zahl {
    font-size: .82rem;
    font-weight: 650;
    color: var(--sh-text);
}

/* Umbrechen statt abschneiden: Auf schmalem Bildschirm rutschen die vier Knoepfe
   untereinander und bleiben alle erreichbar. */
.lore-aktionen__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    min-width: 0;
}

/* Die namentlich ausgewiesenen Eintraege im Bestaetigungsdialog. Eine blosse Zahl
   sagt der Leitung nicht, ob der eine darunter ist, ueber den sie noch entscheiden
   wollte (REQ-LORE-060). */
.lore-flaggen {
    display: grid;
    gap: .3rem;

    padding: var(--sh-space-sm);
    border: 1px solid var(--sh-warn);
    border-radius: var(--sh-radius);
    background: var(--sh-warn-soft);
}

.lore-flagge {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem var(--sh-space-sm);
    min-width: 0;
}

.lore-flagge__titel {
    font-size: .84rem;
    color: var(--sh-text);
    overflow-wrap: anywhere;
}

/* ========================================================== Bearbeiten */

/* Werkzeugleiste im Artikel (REQ-LOREEDIT-001). Sie steht unter dem Kopf und nicht
   daneben: Neben dem Titel wuerde sie auf schmalem Bildschirm mit ihm um dieselbe
   Zeile streiten, und der Titel ist das Wichtigere. */
.lore-werkzeuge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem var(--sh-space-sm);
    min-width: 0;
}

/* Das Kennzeichen aus REQ-LOREEDIT-006. Ein Satz und kein Alarm: Von Hand bearbeitet
   zu sein ist der Normalfall einer gepflegten Lore und kein Fehler. */
.lore-handarbeit {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;

    font-size: .74rem;
    line-height: 1.45;
    color: var(--sh-text-dim);
    overflow-wrap: anywhere;
}

.lore-form {
    display: grid;
    gap: var(--sh-space-lg);
    align-content: start;
    max-width: 1264px;
    min-width: 0;
}

.lore-form__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sh-space-sm);
    min-width: 0;
}

/* Dieselbe Aufteilung wie der Artikel: Eingaben links, Vorschau rechts. Wer Markdown
   schreibt, braucht beim Schreiben zu sehen, was daraus wird — hinter einem
   Umschalter waere die Vorschau die Ansicht, die niemand oeffnet. */
.lore-form__raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 46%);
    gap: var(--sh-space-xl);
    align-items: start;
    min-width: 0;
}

.lore-form__vorschau {
    display: grid;
    gap: var(--sh-space-sm);
    align-content: start;
    min-width: 0;

    position: sticky;
    top: var(--sh-space-md);

    padding: var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
}

/* Kein ausgegrautes Auswahlfeld: Ohne Lore.Publish steht der Rang als Wort da. Eine
   gesperrte Auswahl behauptet, dort gaebe es etwas zu holen. */
.lore-form__gesperrt {
    padding: var(--sh-space-sm);
    border: 1px dashed var(--sh-border);
    border-radius: var(--sh-radius);
}

@media (max-width: 1100px) {
    .lore-form__raster { grid-template-columns: minmax(0, 1fr); gap: var(--sh-space-lg); }

    .lore-form__vorschau {
        position: static;
    }
}

/* ------------------------------------------- Quellen und Verknuepfungen

   REQ-LOREEDIT-010. Der Abschnitt steht unter dem Textformular und ist sichtbar davon
   abgesetzt: Was hier geschieht, wirkt sofort, waehrend der Text erst mit „Speichern"
   in die Datenbank geht. Zwei Vorgaenge mit verschiedener Wirkung duerfen nicht
   aussehen wie ein Formular. */
.lore-form__belege {
    padding-top: var(--sh-space-md);
    border-top: 1px solid var(--sh-border);
    min-width: 0;
}

.lore-belegliste {
    display: grid;
    gap: var(--sh-space-xs);
    margin: var(--sh-space-xs) 0 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

/* Umbrechend und nicht abschneidend: Eine Fundstelle, die zur Haelfte dasteht, ist
   keine Fundstelle. */
.lore-belegliste__zeile {
    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 solid var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
    min-width: 0;
}

/* Der Knopf rutscht ans Ende der Zeile — bei einer umgebrochenen Zeile in die naechste,
   und das ist richtig so: Er gehoert zur ganzen Zeile und nicht zur letzten Angabe. */
.lore-belegliste__zeile > .sh-btn {
    margin-left: auto;
}

/* Die Zielauswahl einer neuen Verknuepfung (REQ-LOREEDIT-010). Abgesetzt vom Rest des
   Blocks: Was hier steht, ist ein Suchvorgang und keine Liste des Eintrags — wer beides
   ohne Trennung uebereinander sieht, haelt die Vorschlaege fuer bereits Verknuepftes. */
.lore-ziel {
    padding: var(--sh-space-sm);
    border: 1px dashed var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
    min-width: 0;
}

/* Umbrechend, weil vier Arten auf einem schmalen Schirm nicht nebeneinander passen. */
.lore-ziel__arten {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-space-xs);
    min-width: 0;
}

/* ------------------------------------------------------- Fassungen */

.lore-fassungen {
    display: grid;
    gap: var(--sh-space-sm);
    align-content: start;
    max-width: 900px;
    min-width: 0;
    margin-top: var(--sh-space-lg);
}

.lore-fassung {
    display: grid;
    gap: .3rem;
    min-width: 0;

    padding: var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
}

.lore-fassung__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem var(--sh-space-sm);
    min-width: 0;
}

.lore-fassung__nummer {
    font-size: .82rem;
    font-weight: 650;
    color: var(--sh-text);
}

.lore-fassung__text > summary {
    cursor: pointer;
    font-size: .78rem;
    color: var(--sh-text-dim);
}

/* ------------------------------------------------------ Papierkorb */

.lore-papier {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem var(--sh-space-sm);
    min-width: 0;

    padding: var(--sh-space-sm) var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
}

.lore-papier__titel {
    font-size: .88rem;
    color: var(--sh-text);
    overflow-wrap: anywhere;
}

/* =============================================================== Schmal */

@media (max-width: 640px) {
    .lore-eintrag { padding: var(--sh-space-sm) var(--sh-space-md); }
    .lore-zeile__wahl { padding: 0 var(--sh-space-xs) 0 var(--sh-space-sm); }
    .lore-regal { padding: var(--sh-space-md); }
    .lore-fliess { font-size: .96rem; line-height: 1.65; }
    .lore-vorspann { font-size: 1.02rem; }

    /* Zahl ueber Knoepfen statt Zahl neben Knoepfen: Nebeneinander bliebe fuer
       „13 Einträge ausgewählt" eine Spalte von zwei Zentimetern. */
    .lore-aktionen {
        flex-direction: column;
        align-items: stretch;
    }

    .lore-aktionen__knoepfe .sh-btn { flex: 1 1 auto; justify-content: center; }
}