/* Handbuch-Experte, Anzeige (Kern-Entwurf 4.1 bis 4.5; Gestaltung C, Aufbau 3 und 4): Dokumentkopf, PDF-Fläche mit
   Seitenvorschau, Hinweisflächen */
#dok-ansicht { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Dokumentkopf in einer Zeile: Nummer + Titel, „Rev. … · n S.“, rechts Blättern, Zoom, ☆, Drucken */
#dok-kopf { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 16px; background: var(--hg); border-bottom: 1px solid var(--rand-hell); }
#dok-titelzeile { flex: 1 1 14rem; min-width: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; overflow: hidden; }
.dok-kopf-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.dok-kopf-info { flex: 0 0 auto; font-size: max(14px, 0.8667rem); color: var(--text2); font-variant-numeric: tabular-nums; }
#werkzeug { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; }
#werkzeug .gruppe { display: inline-flex; align-items: center; gap: 6px; }
#werkzeug .knopf { height: 36px; min-width: 36px; padding: 0 10px; background: var(--hg); border: 1px solid var(--rand2); border-radius: 6px; }
#werkzeug .knopf:hover:not(:disabled) { background: var(--markiert); }
#werkzeug .knopf.klein { height: 32px; font-size: max(14px, 0.8667rem); color: var(--text2); }
#werkzeug .knopf:disabled { opacity: 0.45; cursor: not-allowed; }
#werkzeug .knopf[aria-pressed="true"] { background: var(--markiert); border-color: var(--akzent); color: var(--text); }
#werkzeug .knopf.akzent { padding: 0 14px; background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); font-weight: 500; }
#werkzeug .knopf.akzent:hover:not(:disabled) { background: var(--akzent); filter: brightness(1.2); }
#lesezeichen-knopf { font-size: 1.1rem; }
/* Segmentgruppen „‹ 1 / 18 ›“ und „− 100 % +“ mit einem gemeinsamen Rand */
#werkzeug .gruppe.seg { gap: 0; border: 1px solid var(--rand2); border-radius: 6px; background: var(--hg); }
#werkzeug .seg .knopf { height: 34px; min-width: 32px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; }
#werkzeug input { width: 3rem; height: 28px; padding: 0 0.3rem; text-align: center; background: var(--hg); border: 1px solid var(--rand-hell); border-radius: 4px; font-variant-numeric: tabular-nums; }
.seite-von { padding: 0 6px 0 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#seite-feld.falsch { border-color: var(--fehler-text); background: var(--fehler-hg); }
#zoom-anzeige { min-width: 3.6rem; text-align: center; font-variant-numeric: tabular-nums; }
#lesezeichen-feld { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.8rem; background: var(--warn-hg); color: var(--warn-text); }
#lesezeichen-feld input { flex: 1 1 auto; max-width: 28rem; padding: 0.3rem 0.5rem; background: var(--hg); color: var(--text); border: 1px solid var(--rand); border-radius: 4px; }
/* Treffer der Suche (Suche 4.3): „Treffer i von k“, ▲ ▼, ×; gelb, wenn der Treffer nicht markierbar ist */
#treffer-leiste { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.8rem; background: var(--hg2); color: var(--text); border-bottom: 1px solid var(--rand-hell); }
#treffer-leiste.warn { background: var(--warn-hg); color: var(--warn-text); }
#treffer-stand { font-variant-numeric: tabular-nums; white-space: nowrap; }
#treffer-hinweis { flex: 1 1 auto; min-width: 0; }
#treffer-leiste .knopf { height: 32px; min-width: 32px; padding: 0 8px; background: var(--hg); color: var(--text); border: 1px solid var(--rand2); border-radius: 6px; }
#treffer-leiste .knopf:disabled { opacity: 0.45; cursor: not-allowed; }
#treffer-zu { margin-left: auto; }
/* Dokumentbereich: links Vorschauspalte (Standard 96 px, per Griff 80 bis 320 px, SPEC 16.10 Nr. 7), rechts die Seite */
#dok-flaeche { --vorschau-breite: 96px; flex: 1 1 auto; min-height: 0; display: flex; background: var(--dok-hg); }
#vorschau-spalte { flex: 0 0 var(--vorschau-breite); width: var(--vorschau-breite); min-width: 0; display: flex; flex-direction: column; background: var(--vorschau-hg); border-right: 1px solid var(--rand2); }
#vorschau-spalte:has(> #vorschau[hidden]), #dok-flaeche:has(#vorschau[hidden]) #vorschau-griff { display: none; }
#vorschau-werkzeug { flex: 0 0 auto; display: flex; justify-content: center; gap: 4px; padding: 4px; border-bottom: 1px solid var(--rand2); }
#vorschau-werkzeug .knopf { height: 26px; min-width: 28px; padding: 0 6px; background: var(--hg); color: var(--text); border: 1px solid var(--rand2); border-radius: 5px; }
#vorschau-werkzeug .knopf:disabled { opacity: 0.45; cursor: not-allowed; }
#vorschau { --vs-bild: 72px; flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: safe center; gap: 10px; padding: 12px 8px; }
#vorschau-griff { flex: 0 0 6px; width: 6px; cursor: col-resize; touch-action: none; }
#vorschau-griff:hover, #vorschau-griff.zieht, #vorschau-griff:focus-visible { background: var(--akzent); }
.vs-seite { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--text2); }
.vs-bild { display: block; width: var(--vs-bild); overflow: hidden; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.vs-bild canvas { display: block; }
.vs-seite:hover .vs-bild { outline: 2px solid var(--rand); }
.vs-seite.aktiv .vs-bild { outline: 2px solid var(--akzent); outline-offset: 0; }
.vs-nr { font-size: max(14px, 0.8rem); font-variant-numeric: tabular-nums; }
.vs-seite.aktiv .vs-nr { color: var(--text); font-weight: 600; }
#pdf-container { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; background: var(--dok-hg); }
#pdf-container:focus-visible { outline-offset: -3px; }
#dok-hinweis { flex: 1 1 auto; overflow: auto; padding: 1.2rem; }
#dok-hinweis .klein { margin-top: 0.8rem; font-size: max(14px, 0.95rem); color: var(--text2); }
/* content-box: PDF.js setzt Breite/Höhe der Seite ohne den 9-px-Rand; mit dem projektweiten border-box (haupt.css) wurde die
   Zeichenfläche um 18 px gestaucht, die Textebene nicht (Ursache des Markierungsversatzes, B8b) */
.pdfViewer .page { box-sizing: content-box; margin: 12px auto; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
/* Fundstellen (SPEC § 16.10 Nr. 1, 2): die Fläche von PDF.js bleibt unsichtbar (sie liegt in der Ersatzschrift versetzt),
   sichtbar ist die Ebene aus markierung.js auf der Tinte des Wortes; Farben in haupt.css (--treffer-*) */
#pdf-container .textLayer .highlight, #pdf-container .textLayer .highlight.selected { background-color: transparent; backdrop-filter: none; }
.hx-treffer-ebene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hx-treffer { position: absolute; box-sizing: border-box; background: var(--treffer-fuellung); border: 1px solid var(--treffer-rand); border-radius: 2px; }
.hx-treffer.aktiv { background: var(--treffer-aktiv-fuellung); border: 2px solid var(--treffer-aktiv-rand); border-radius: 3px; }
#ziehgriff { width: 6px; touch-action: none; }
#ziehgriff:hover, #ziehgriff.zieht { background: var(--akzent); }
iframe#druck-rahmen { position: fixed; width: 0; height: 0; border: 0; visibility: hidden; }
/* Ladeanzeige von PDF.js ohne Bilddatei (loading-icon.gif liegt nicht bei): Text statt Bild */
.pdfViewer .page.loadingIcon::after { background: none; content: "Seite wird geladen …"; color: var(--text2); text-align: center; padding-top: 3rem; }
@media (max-width: 899.98px) {
  #vorschau-spalte, #vorschau-griff { display: none; }
  #dok-kopf { padding: 6px 10px; }
}