/* === Wiener Urkundenbuch — Document Page === */
/* ==========================================================================
   Document page
   ========================================================================== */

.document {
    max-width: var(--max-width-wide);
    margin: 0 auto;
}

/* No-facsimile: centre the text at readable width */
.document:not(.has-facsimile) .doc-content {
    max-width: var(--max-width);
    margin: 0 auto;
}


/* ==========================================================================
   Document toolbar
   --------------------------------------------------------------------------
   Sticky-Header der Detailseite. Zwei semantische Zonen:

     IDENTITY  (links)  — Breadcrumb-Kette + Meta-Strip
                          (Originaldatierung, Citation). Antwortet auf
                          „Wer/wo bin ich, was ist das?".
     CONTROLS  (rechts) — Action-Buttons (Download/Cite/Prev/Next) +
                          Layer-Toggles als 2x2-Block. Antwortet auf
                          „Was kann ich tun, wie sehe ich es?".

   Die Toolbar wird horizontal aus der Main-Polsterung herausgezogen
   (-space-lg), damit sie volle Breite hat; vertikal sitzt sie direkt
   unter der Site-Nav (top: 3.5rem).
   ========================================================================== */

.doc-toolbar {
    position: sticky;
    top: 3.5rem;
    z-index: calc(var(--z-nav) - 1);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-lg)) 0;
    padding: var(--space-md) var(--space-lg);
}

.doc-toolbar-inner {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
}

/* Identity: Breadcrumb oben, Meta-Strip darunter mit kleinem Abstand. */
.doc-toolbar-identity {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    flex: 1 1 auto;
}

/* Controls: Toggles + Buttons in EINER horizontalen Reihe oben rechts.
   Die Toggles sitzen links der Buttons, alles auf Toolbar-Btn-Hoehe. */
.doc-toolbar-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    flex: 0 0 auto;
}

/* --- IDENTITY: Breadcrumb-Kette ----------------------------------------- */

.doc-breadcrumb {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-breadcrumb a {
    color: var(--anno-person);
    text-decoration: none;
}

.doc-breadcrumb a:hover { text-decoration: underline; }

.bc-sep {
    margin: 0 var(--space-xs);
    opacity: 0.4;
}

/* Letztes Glied: identifiziert die Urkunde (Nr. + Datum + Ort).
   Punkt-Trenner unterscheiden die identifizierenden Komponenten von
   den Hierarchie-Trennern (›). */
.bc-doc {
    color: var(--color-text);
    font-weight: 500;
}

.bc-doc strong { font-weight: 600; }

.bc-dot {
    margin: 0 var(--space-xs);
    color: var(--color-text-light);
}

.bc-date,
.bc-place {
    font-weight: 400;
    color: var(--color-text-muted);
}

/* --- IDENTITY: Meta-Strip (Originaldatierung + Quelle) ------------------ */

.doc-toolbar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    align-items: baseline;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

.doc-toolbar-meta .meta-pair {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-xs);
    min-width: 0;
}

.doc-toolbar-meta .meta-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    flex-shrink: 0;
}

.doc-toolbar-meta .meta-value {
    color: var(--color-text);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 32rem;
}

/* --- CONTROLS: Action-Buttons (Download / Cite / Prev / Next) ----------- */

.doc-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    position: relative; /* anchor fuer .cite-popover */
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast),
                color var(--transition-fast);
}

.toolbar-btn:hover {
    border-color: var(--anno-person);
    color: var(--anno-person);
}

.toolbar-btn[aria-expanded="true"] {
    border-color: var(--anno-person);
    color: var(--anno-person);
    background: var(--color-bg-warm);
}

/* --- CONTROLS: Layer-Toggles (kompakte horizontale Reihe) ---------------
   Vier Pills nebeneinander, links der Action-Buttons. Bewusst klein
   gehalten (Hoehe ~24px), damit die ganze Controls-Zeile auf
   Toolbar-Btn-Hoehe (2rem = 32px) bleibt. */

.doc-toolbar-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
}

.doc-toolbar-legend .legend-toggle {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    line-height: 1;
    color: var(--color-text-muted);
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                opacity var(--transition-fast);
}

.doc-toolbar-legend .legend-toggle:hover {
    background: var(--color-bg-warm);
    border-color: var(--color-border);
}

.doc-toolbar-legend .legend-toggle:focus-visible {
    outline: 2px solid var(--anno-person);
    outline-offset: 2px;
}

.doc-toolbar-legend .legend-toggle-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text);
}

.doc-toolbar-legend .legend-toggle-dots {
    display: inline-flex;
    gap: 2px;
}

.doc-toolbar-legend .legend-toggle-dots .legend-swatch {
    width: 0.5rem;
    height: 0.5rem;
}

.doc-toolbar-legend .legend-toggle[aria-pressed="false"] {
    opacity: 0.45;
}

.doc-toolbar-legend .legend-toggle[aria-pressed="false"] .legend-toggle-label {
    text-decoration: line-through;
    color: var(--color-text-light);
}

/* Citation popover */
.cite-popover {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-xs);
    width: 28rem;
    max-width: 90vw;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.1));
    padding: var(--space-md);
    z-index: var(--z-tooltip);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
}

.cite-section {
    position: relative;
    margin-bottom: var(--space-md);
}

.cite-section:last-child { margin-bottom: 0; }

.cite-label {
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.cite-text {
    background: var(--color-bg-warm);
    padding: var(--space-sm);
    border-radius: var(--radius-sm, 4px);
    line-height: 1.5;
    word-break: break-word;
}

.cite-bibtex {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    white-space: pre-wrap;
    margin: 0;
}

.cite-copy-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    font-size: var(--text-base);
    color: var(--color-text-light);
    cursor: pointer;
    padding: 2px var(--space-xs);
}

.cite-copy-btn:hover { color: var(--anno-person); }

/* Annotationen — permanenter dritter Bereich der Detailseite, neben
   Editionstext (Body) und Digitalisat (Faksimile). Aggregiert die
   TEI-Annotationen in vier Sub-Tabellen (Personen/Orgs/Orte,
   Ereignisse, Dispositivformeln, Editorische Ergaenzungen). Keine
   Toggle — immer sichtbar. */
.annotations-view {
    max-width: var(--max-width-wide);
    margin: var(--space-2xl) auto 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg) var(--space-xl);
    overflow-x: auto;
}

.annotations-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.annotations-title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
}

.annotations-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* Dev-only-Elemente. Default ausgeblendet, sichtbar wenn die URL
   den Parameter ?dev=1 traegt (setzt .dev-mode auf <html>). In
   diesem Modus werden die Elemente mit einem warm-gelben gestrichelten
   Rahmen plus Label markiert, damit klar ist, dass sie nicht zur
   oeffentlichen Sicht gehoeren. Mechanik laesst sich projektweit auf
   andere Elemente uebertragen. */
.dev-only { display: none !important; }
.dev-mode .dev-only {
    display: revert !important;
    outline: 2px dashed #d99a3a;
    outline-offset: 4px;
    position: relative;
}
.dev-mode .dev-only::before {
    content: 'Entwicklung';
    position: absolute;
    top: -10px;
    right: 8px;
    background: #d99a3a;
    color: #fff;
    padding: 1px 8px;
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 3px;
    z-index: 1;
    pointer-events: none;
}

/* Tabs zwischen den Annotations-Sub-Tabellen. Zentriert, klar
   als Either-Or-Schalter gestylt (gefüllter aktiver, gerahmter inaktiver
   Zustand) -- absichtlich abgesetzt von den additiven Layer-Toggles
   oben rechts in der Quellansicht. */
.annotations-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    margin: var(--space-md) 0 var(--space-lg);
}
.annotations-tabs:empty { display: none; }

.annotations-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.annotations-tab:hover {
    color: var(--color-text);
    border-color: var(--color-border-dark);
}
.annotations-tab.is-active {
    background: var(--color-accent);
    color: var(--color-on-accent, #fff);
    border-color: var(--color-accent);
}
.annotations-tab-label { line-height: 1.2; }
.annotations-tab-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: var(--text-xs);
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
    line-height: 1.4;
}
.annotations-tab.is-active .annotations-tab-count {
    background: rgba(255, 255, 255, 0.22);
}

.annotation-group-title {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm);
}

.annotations-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
}

.annotations-table th {
    text-align: left;
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
    padding: var(--space-xs) var(--space-sm);
}

.annotations-table td {
    padding: var(--space-sm) var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
    line-height: 1.45;
}

.annotations-table tr:hover td { background: var(--color-bg-warm); }

/* Genannt-als-Zelle: aufgeloeste Identitaet als Hauptname, der Quell-
   Wortlaut in Klammern dahinter; technische ID nur intern oder mit ?dev=1. */
.anno-wording {
    color: var(--color-text-muted);
    font-style: italic;
}
.anno-ref {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--color-text-light);
}

/* Event-Gruppen-Header in der Entitaeten-Tabelle. Bringt die strukturelle
   Zugehoerigkeit der Entitaeten zum jeweiligen Rechtsgeschaeft visuell
   ins Markup, ohne dass eine zweite "Ereignisse"-Tabelle noetig waere. */
.annotations-table .annotations-group-row th {
    text-align: left;
    background: var(--color-bg-warm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0;
    text-transform: none;
    padding: var(--space-sm) var(--space-sm);
    border-top: 2px solid var(--color-border-dark);
    border-bottom: 1px solid var(--color-border);
}

/* Geschlechts-Glyph in der Annotations-Tabelle: knapp, monochrom,
   uebernimmt die Token-Farbe der jeweiligen Tabellen-Zelle. Unbekanntes
   Geschlecht (kein @sex im Register) als gedaempfter Dash. */
.anno-sex {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text);
}
.anno-sex--unknown { color: var(--color-text-light); }


.annotations-group-source {
    font-style: italic;
    color: var(--anno-trigger);
    font-weight: 700;
}
.annotations-group-label { font-weight: 600; }
.annotations-group-id {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: 0.78em;
    color: var(--color-text-muted);
    margin-left: var(--space-sm);
    font-weight: 400;
    font-style: normal;
}

.annotations-table .annotations-group-row:first-child th {
    border-top: 0;
}

.annotations-table .annotations-group-row:hover th { background: var(--color-bg-warm); }

/* Profil-Verlinkung in der Entitäten-Tabelle: subtil unterstreichen,
   damit erkennbar ist, dass die Person zu einem Profil führt. */
.annotations-table .anno-table-link {
    color: var(--anno-person);
    text-decoration: none;
    border-bottom: 1px dotted var(--anno-person-border);
}

.annotations-table .anno-table-link:hover {
    border-bottom-color: var(--anno-person);
    text-decoration: none;
}

/* Type-Marker vor der Nennform in der Entitaeten-Tabelle. Kleiner
   farbiger Punkt in der Annotations-Token-Farbe, gleiches Farbsystem
   wie die Inline-Markierungen im Body, damit die Typ-Information
   erhalten bleibt, ohne eine eigene Spalte zu kosten. */
.anno-type-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}
.anno-type-dot--person { background: var(--anno-person); }
.anno-type-dot--organisation { background: var(--anno-org); }
.anno-type-dot--place { background: var(--anno-place); }
.anno-type-dot--other { background: var(--color-text-light); }

/* Funktionsrolle als gefuellte Pille. Akzentfarbe traegt die
   kontrollierte Vokabular-Kategorie; alle Rollen-Modifier teilen
   sich denselben Look, damit die Spalte als Ganzes als
   "Funktionsrolle" lesbar bleibt. */
.role-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.3;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-on-accent, #fff);
    border: 1px solid var(--color-accent);
    white-space: nowrap;
    letter-spacing: 0;
}
.role-pill--none {
    background: transparent;
    color: var(--color-text-light);
    border-color: transparent;
    font-weight: 400;
}

/* Attribut als umrandeter Tag, ein Tag pro Wert. Visuell schwaecher
   als die gefuellte Funktionsrolle, weil Attribute quellennahe
   Beischriften sind (kin/title/prof/occ/dead/...). Type-Information
   liegt im Hover-Tooltip (data-hint-Mechanik). */
.attr-tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.3;
    padding: 2px 8px;
    margin: 1px 4px 1px 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border-dark);
    white-space: nowrap;
    letter-spacing: 0;
}
.attr-empty { color: var(--color-text-light); }

.annotations-table .annotations-group-row th {
    text-align: left;
}
.annotations-group-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-sans);
    min-height: 1em;
}
.annotations-group-quote {
    text-align: center;
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--color-text-muted);
}
.annotations-group-quote .annotations-group-source {
    color: var(--color-text-muted);
    font-weight: 500;
    quotes: "\201E" "\201C";
}
.annotations-group-count {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0;
    text-transform: none;
}
/* Anno-Type-Dot in der Tabellen-Zelle: an Bezug zur Nennform halten,
   damit Tabellen-Linie ruhig bleibt. */
.annotations-table .anno-type-dot {
    margin-right: 8px;
}

.annotations-empty {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-light);
    text-align: center;
    padding: var(--space-lg);
}

/* Inline prev/next in toolbar — Icon-Buttons auf Toolbar-Hoehe.
   .doc-paging-prev/-next bekommen ueber die zusaetzliche .toolbar-btn-
   Klasse die gleiche 2rem-Box wie Download/Faktoid/Cite. Disabled-
   Variante bleibt sichtbar, aber ausgegraut und nicht klickbar. */
.doc-paging-inline {
    display: inline-flex;
    align-items: center;
    margin: 0;
    gap: var(--space-xs);
}

.doc-paging-inline .toolbar-btn.is-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}


/* --- Document content area (synopsis grid) ---
   Abstand zur sticky Toolbar grosszuegig: --space-2xl, damit beim
   Scrollen die erste Zeile nicht direkt am unteren Toolbar-Rand klebt. */
.doc-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    align-items: start;
}

/* Synopsis: text + facsimile side by side. Both columns stretch to
   the same height so the facsimile card aligns visually with the
   text card. */
.has-facsimile .doc-content {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}


/* Card surface: base in components.css */

/* --- Document body (rendered TEI) --- */
.doc-body {
    padding: var(--space-xl) var(--space-2xl);
    line-height: var(--leading-body);
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.doc-body p {
    margin: 0 0 var(--space-lg);
    text-align: justify;
    hyphens: auto;
}

.doc-body p:last-child { margin-bottom: 0; }


/* Facsimile panel: sticky, not grid-stretched. Long regest would
   otherwise make the panel tall and center the image below the fold. */
.doc-facs-panel {
    align-self: start;
    position: sticky;
    top: 8rem;
    height: calc(100vh - 9rem);
}

.facs-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg-warm);
}

.facs-viewer:fullscreen {
    width: 100vw;
    height: 100vh;
    border: none;
    border-radius: 0;
}

/* Single combined control bar: page navigation on the left,
   zoom/rotate on the right. */
.facs-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-warm);
    border-bottom: 1px solid var(--color-border-light);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.facs-controls-pages,
.facs-controls-zoom {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.facs-controls button {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.facs-controls button:hover:not(:disabled) {
    border-color: var(--anno-person);
    color: var(--color-text);
}

.facs-controls button:disabled {
    opacity: 0.3;
    cursor: default;
}

.facs-controls-zoom .facs-zoom-reset {
    width: auto;
    padding: 0 var(--space-sm);
    font-size: var(--text-sm);
}

.facs-image-wrap {
    flex: 1 1 auto;
    min-height: 20rem;
    overflow: hidden;
    background: var(--color-bg-warm);
    position: relative;
}

.facs-osd {
    width: 100%;
    height: 100%;
}

.facs-attribution {
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin: 0;
    padding: var(--space-xs) var(--space-md);
}

.facs-attribution a {
    color: var(--anno-person);
    text-decoration: none;
}

.facs-attribution a:hover { text-decoration: underline; }


/* --- Document paging (prev/next) ---
   Nur die Inline-Variante in der Toolbar-Rechts-Sektion existiert. Der
   nackte `.doc-paging`-Wrapper traegt nur Layout-Reset; die Buttons
   selbst sind `.toolbar-btn` und erben dort ihren Stil. */
.doc-paging {
    display: inline-flex;
    align-items: center;
    margin: 0;
    gap: var(--space-xs);
}


/* Provenance list: muted text color */
.provenance-list dd { color: var(--color-text-muted); }

.prov-path {
    font-size: var(--text-2xs);
    opacity: 0.7;
    margin-left: var(--space-xs);
}

/* Legend grid (reused in sidebar) */
.legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-sm) var(--space-lg);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.legend-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 2px;
    flex-shrink: 0;
}

.swatch-person       { background: var(--anno-person-bg); border: 1px solid var(--anno-person-border); border-bottom: 2px solid var(--anno-person); }
.swatch-org          { background: var(--anno-org-bg); border: 1px solid var(--anno-org-border); border-bottom: 2px solid var(--anno-org); }
.swatch-place        { background: var(--anno-place-bg); border: 1px solid var(--anno-place-border); border-bottom: 2px solid var(--anno-place); }
.swatch-fn-issuer    { background: var(--anno-fn-issuer-bg); border-left: 3px solid var(--anno-fn-issuer); }
.swatch-fn-recipient { background: var(--anno-fn-recipient-bg); border-left: 3px solid var(--anno-fn-recipient); }
.swatch-fn-witness   { background: var(--anno-fn-witness-bg); border-left: 3px solid var(--anno-fn-witness); }
.swatch-trigger      { background: transparent; font-weight: 700; color: var(--anno-trigger); border: 1px dashed var(--anno-trigger); }
.swatch-add          { background: transparent; font-style: italic; color: var(--anno-add); border: 1px solid var(--anno-add); }
.swatch-attr         { background: var(--color-bg-warm); border: 1px solid var(--color-border-dark); border-bottom: 1px dashed var(--anno-attr); }


/* Always-visible provenance strip (Two-Layer UI: data layer) */
.doc-provenance {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    color: var(--color-text-light);
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
}

.doc-provenance code {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

.prov-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: var(--space-xs);
}

.prov-sep {
    color: var(--color-border);
}

/* Print-only metadata block */
.doc-print-meta {
    display: none;
}


/* Structural sections */
.tei-abstract { margin-bottom: var(--space-xl); }

.tei-entry { margin-bottom: var(--space-xl); }

.tei-header {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.tei-header p { text-align: left; }

.tei-seal,
.tei-nota {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-light);
}

/* Mikro-Ueberschrift fuer tei-abstract / tei-seal / tei-nota / tei-entry.
   Soll beim Scrollen die Sektion sofort identifizieren, ohne den
   Lesefluss aufzublaehen — daher kleinformatig, gespacet, gross-
   geschrieben. Der erste Heading-Block braucht keinen Top-Abstand,
   weil tei-abstract direkt am Body-Anfang sitzt. */
.tei-section-head {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
}


/* --- Annotation highlighting --- */

/* Level 3: Entity highlights (shared base) */
.anno-person,
.anno-org,
.anno-place {
    border-bottom: 2px solid;
    border-radius: 2px;
    padding: 1px 2px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

/* Entity annotation links: inherit text colour, no underline */
a.anno-person,
a.anno-org,
a.anno-place {
    color: inherit;
    text-decoration: none;
}

.anno-person { background: var(--anno-person-bg); border-bottom-color: var(--anno-person); }
.anno-org    { background: var(--anno-org-bg);    border-bottom-color: var(--anno-org); }
.anno-place  { background: var(--anno-place-bg);  border-bottom-color: var(--anno-place); }

.anno-person:hover { background: var(--anno-person-border); }
.anno-org:hover    { background: var(--anno-org-border); }
.anno-place:hover  { background: var(--anno-place-border); }


/* Level 2: Function roles — left-border accents (shared base) */
.anno-fn {
    position: relative;
    border-left: 3px solid;
    padding-left: var(--space-sm);
}

.fn-label {
    display: none;  /* shown by JS tooltip on hover */
}

.anno-fn-issuer   { border-left-color: var(--anno-fn-issuer);    background: var(--anno-fn-issuer-bg); }
.anno-fn-recipient { border-left-color: var(--anno-fn-recipient); background: var(--anno-fn-recipient-bg); }
.anno-fn-witness  { border-left-color: var(--anno-fn-witness);   background: var(--anno-fn-witness-bg); }
.anno-fn-other    { border-left-color: var(--anno-fn-other);     background: var(--anno-fn-other-bg); }


/* Level 1: Events — subtle wrapper */
.anno-event {
    display: inline;
}


/* Level 4: Attributes */
.anno-attr {
    font-size: 0.9375em;
    color: var(--color-text-muted);
}

.anno-attr-kin {
    font-style: italic;
}

.anno-attr-title {
    font-variant: small-caps;
}

.anno-attr-prof {
    font-style: italic;
    color: var(--anno-org);
}

.anno-attr-dead::after {
    content: ' \2020';
    color: var(--color-text-light);
}

.anno-attr-occ {
    font-style: italic;
}


/* Triggerstrings */
.anno-trigger {
    font-weight: 600;
    color: var(--anno-trigger);
}

.anno-trigger-fn {
    font-weight: 500;
    color: var(--color-text-muted);
}

/* Dispositivformel: jede Auspraegung im Volltext einzeln markiert,
   damit benachbarte Trigger-Verben als eigenstaendige Annotationen
   sichtbar sind (Kunden-Feedback 2026-05). Konsistent mit dem
   dashed-border-Stil des Legenden-Swatches. */
.anno-trigger-disp {
    font-weight: 700;
    text-decoration: underline dashed var(--anno-trigger);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* Editorial additions */
.tei-add {
    font-style: italic;
    color: var(--anno-add);
}

.tei-add::before { content: '['; color: var(--color-text-light); }
.tei-add::after  { content: ']'; color: var(--color-text-light); }


/* Unclear text */
.tei-unclear {
    text-decoration: underline wavy var(--color-text-light);
    text-underline-offset: 3px;
}


/* Notes */
.tei-note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}


/* Page/line breaks */
.tei-pb {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin: 0 var(--space-xs);
}

.tei-gap {
    color: var(--color-text-light);
    font-style: italic;
}

.tei-sic {
    border-bottom: 1px dotted var(--color-text-light);
}


/* Tooltip-Styles wurden nach components.css verschoben, damit sie auf
   allen Seiten verfuegbar sind. Tabellen-Badges (Quellenseite, Register)
   nutzen denselben Hover-Tooltip wie Entity-Annotationen im Dokument-
   Volltext. */


/* Interaktive Legende: kompakte Toggle-Buttons leben jetzt in der
   Toolbar (.doc-toolbar-legend .legend-toggle, s. oben). Eine
   eigenstaendige breite Legenden-Liste gibt es nicht mehr. */


/* --- Annotation layer toggle states --- */

/* Entities off */
.doc-body.hide-entities .anno-person,
.doc-body.hide-entities .anno-org,
.doc-body.hide-entities .anno-place {
    background: transparent !important;
    border-bottom-color: transparent !important;
    cursor: default;
}

.doc-body.hide-entities a.anno-person,
.doc-body.hide-entities a.anno-org,
.doc-body.hide-entities a.anno-place {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}

/* Functions off */
.doc-body.hide-functions .anno-fn {
    border-left-color: transparent !important;
    background: transparent !important;
    padding-left: 0;
}

.doc-body.hide-functions .fn-label {
    display: none;
}

/* Attributes off */
.doc-body.hide-attributes .anno-attr {
    font-size: inherit;
    font-style: inherit;
    font-variant: inherit;
    color: inherit;
}

/* Triggers off */
.doc-body.hide-triggers .anno-trigger {
    font-weight: inherit;
    color: inherit;
    border-bottom: none;
    text-decoration: none;
}