/* KUKANILEA Datei-Viewer -- nur die Arbeitsflaeche.
 *
 * Tokens, Kopf, Landing und Palette kommen aus assets/lib/kukanilea-datei-oberflaeche/basis.css.
 *
 * Zwei Zustaende nach dem Workspace-Vertrag (.claude/rules/webtool-workspace-contract.md):
 *   LANDING  Erklaerung, Ablage, Formate, Garantie, FAQ, Fuss
 *   ARBEIT   kompakter Kopf, Werkzeugleiste, Arbeitsflaeche -- sonst nichts
 * Der Zustand steht am Wurzelelement: html[data-or-modus="arbeit"].
 */

/* ── Arbeitsmodus ────────────────────────────────────────────────── */
html:not([data-or-modus="arbeit"]) #orArbeit { display: none; }
html[data-or-modus="arbeit"], html[data-or-modus="arbeit"] body { height: 100%; overflow: hidden; }
html[data-or-modus="arbeit"] body { display: flex; flex-direction: column; }
html[data-or-modus="arbeit"] #main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html[data-or-modus="arbeit"] #main > :not(#orArbeit) { display: none; }
html[data-or-modus="arbeit"] .or-fuss { display: none; }

.or-arbeit { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.or-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px clamp(10px, 2vw, 18px);
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.or-datei { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 220px; }
.or-datei-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-typ { flex: none; font: 700 12px/1 var(--sans); padding: 6px 9px; border-radius: 999px; background: var(--akzent-weich); color: var(--akzent); }
.or-modi { display: inline-flex; border: 1px solid var(--linie-2); border-radius: 11px; padding: 2px; background: var(--flaeche-2); }
.or-modi button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 600 14.5px/1 var(--sans); cursor: pointer; }
.or-modi button[aria-selected="true"] { background: var(--akzent); color: var(--akzent-text); }
.or-modi button[disabled] { opacity: .5; cursor: not-allowed; }
.or-gruppe { display: inline-flex; align-items: center; gap: 4px; }
.or-zoomwert { min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; font-size: 14px; }
.or-suche { display: inline-flex; align-items: center; gap: 4px; }
.or-suche input { min-height: 44px; width: 190px; padding: 0 12px; border: 1px solid var(--linie-2); border-radius: 10px; background: var(--flaeche); color: var(--ink); font: 15px var(--sans); }
.or-suche-zahl { font-size: 13px; color: var(--mut); min-width: 60px; font-variant-numeric: tabular-nums; }

.or-schnell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px clamp(10px, 2vw, 18px); background: var(--flaeche-2); border-bottom: 1px solid var(--linie); }
.or-schnell-titel { font-size: 13px; font-weight: 700; color: var(--mut); margin-right: 4px; }
.or-schnell .btn { min-height: 40px; font-size: 14px; }
@media (pointer: coarse) { .or-schnell .btn, .or-modi button { min-height: 44px; } }
.or-hinweiszeile { padding: 8px clamp(10px, 2vw, 18px); font-size: 14.5px; background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--linie); }

/* Digitale Signatur: Kurzurteil ueber dem Dokument, Bericht zum Aufklappen (gedeckelt, eigener Scroll) */
.or-signatur { border-bottom: 1px solid var(--linie); background: var(--warn-bg); color: var(--warn); font-size: 14.5px; }
.or-signatur[data-stufe="ok"] { background: var(--gut-bg); color: var(--gut); }
.or-signatur[data-stufe="fehler"] { background: var(--fehler-bg); color: var(--fehler); }
.or-signatur summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px clamp(10px, 2vw, 18px); cursor: pointer; list-style: none; }
.or-signatur summary::-webkit-details-marker { display: none; }
.or-signatur summary::after { content: "Prüfbericht ▾"; margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
.or-signatur[open] summary::after { content: "schließen ▴"; }
.or-sig-zeichen { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; font-weight: 700; font-size: 13px; flex: none; }
.or-sig-titel { font-weight: 700; white-space: nowrap; }
.or-sig-kurz { min-width: 0; }
.or-sig-bericht { max-height: 45dvh; overflow: auto; padding: 4px clamp(10px, 2vw, 18px) 14px; background: var(--flaeche); color: var(--ink); border-top: 1px solid var(--linie); }
.or-sig-bericht h3 { font-size: 14px; margin: 12px 0 6px; }
.or-sig-bericht dl { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.or-sig-bericht dt { color: var(--mut); font-size: 13.5px; }
.or-sig-bericht dd { margin: 0; overflow-wrap: anywhere; font-size: 13.5px; }
.or-sig-lokal { margin: 12px 0 4px; font: 600 13px/1.5 var(--mono); color: var(--gut); }
.or-sig-grenze { margin: 0; font-size: 13px; color: var(--mut); }
@media (max-width: 560px) { .or-sig-bericht dl { grid-template-columns: minmax(0, 1fr); } .or-sig-bericht dd { margin-bottom: 6px; } .or-signatur summary::after { content: "▾"; } .or-signatur[open] summary::after { content: "▴"; } }

.or-flaeche { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.or-flaeche.mit-seitenleiste { grid-template-columns: 260px minmax(0, 1fr); }
@media (min-width: 1280px) { .or-flaeche.mit-inspektor { grid-template-columns: minmax(0, 1fr) 340px; } .or-flaeche.mit-seitenleiste.mit-inspektor { grid-template-columns: 260px minmax(0, 1fr) 340px; } }
/* Ohne Gliederung gibt es keine Seitenleiste -- sonst belegt das leere
   Element die erste Rasterspalte und schiebt den Inspektor in eine zweite
   Zeile (am 2026-09-27 live so gesehen). */
.or-flaeche:not(.mit-seitenleiste) .or-seitenleiste { display: none; }
.or-seitenleiste, .or-inspektor { min-height: 0; overflow: auto; background: var(--flaeche); padding: 12px; }
.or-seitenleiste { border-right: 1px solid var(--linie); }
.or-inspektor { border-left: 1px solid var(--linie); display: none; }
@media (min-width: 1280px) { .mit-inspektor .or-inspektor { display: block; } }
.or-seitenleiste h2, .or-inspektor h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); margin: 4px 0 8px; }
.or-inhalt-liste { list-style: none; margin: 0; padding: 0; }

/* Ordnerbaum in der Seitenleiste: Ordner als details/summary (Tastatur ohne eigenes Skript), Dateien als Knoepfe */
.or-ordner { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--linie); }
.or-ordner-kopf { display: flex; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 700 14.5px/1.3 var(--sans); text-align: left; cursor: pointer; }
.or-ordner .or-obaum { list-style: none; margin: 0; padding: 0 0 0 12px; }
.or-ordner > .or-obaum { padding-left: 0; }
.or-ordner details { margin: 0; padding: 0; border: 0; }
.or-obaum summary { display: flex; justify-content: space-between; gap: 6px; min-height: 36px; align-items: center; padding: 4px 8px 4px 4px; list-style: none; border-radius: 8px; color: var(--ink); font: 600 14px/1.3 var(--sans); cursor: pointer; }
.or-obaum summary::-webkit-details-marker { display: none; }
.or-obaum summary > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.or-obaum summary::before { content: ""; flex: none; width: 0; height: 0; margin: 0 5px 0 3px; border-left: 6px solid var(--mut); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; transition: transform .15s ease; }
.or-obaum details[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .or-obaum summary::before { transition: none; } }
.or-obaum button { display: block; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 14px/1.3 var(--sans); text-align: left; cursor: pointer; overflow-wrap: anywhere; padding-left: 22px; }
.or-obaum-zahl { color: var(--mut); font: 12.5px var(--mono); flex: none; }
.or-ordner-kopf:hover, .or-obaum summary:hover, .or-obaum button:hover { background: var(--akzent-weich); }
.or-ordner-kopf[aria-current="true"], .or-obaum button[aria-current="true"] { background: var(--akzent-weich); color: var(--akzent); }
.or-obaum button[aria-current="true"] { font-weight: 700; }
.or-ablage-ordner { margin: 8px 0 0; text-align: center; }
.or-ordner-arten { color: var(--mut); font-size: 15px; }
@media (pointer: coarse) { .or-obaum summary, .or-obaum button, .or-ordner-kopf { min-height: 44px; } }
.or-inhalt-liste button { display: block; width: 100%; text-align: left; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 14.5px/1.3 var(--sans); cursor: pointer; }
.or-inhalt-liste button:hover { background: var(--akzent-weich); }
.or-inhalt-liste button[aria-current="true"] { background: var(--akzent-weich); color: var(--akzent); font-weight: 700; }
@media (max-width: 959.98px) {
  .or-flaeche.mit-seitenleiste { grid-template-columns: minmax(0, 1fr); }
  .or-seitenleiste { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; max-height: 55dvh; border-right: 0; border-top: 1px solid var(--linie-2); box-shadow: 0 -12px 32px -12px rgba(15, 23, 42, .35); border-radius: 16px 16px 0 0; transform: translateY(105%); transition: transform .2s; }
  .or-seitenleiste.ist-offen { transform: none; }
}
@media (min-width: 960px) { #orSeitenleisteKnopf { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.or-buehne { min-height: 0; overflow: auto; position: relative; background: var(--bg); }
/* Die Buehne bekommt nach dem Oeffnen den Fokus (sonst laege er auf der
   verschwundenen Ablage). Ihr Fokus ist eine Innenlinie statt eines Rahmens. */
.or-buehne:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--fokus); }
.or-buehnenfuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 4px clamp(10px, 2vw, 18px); font-size: 13px; color: var(--mut); background: var(--flaeche); border-top: 1px solid var(--linie); }
.or-buehnenfuss nav { display: flex; gap: 12px; }
.or-buehnenfuss a { color: var(--mut); min-height: 32px; display: inline-flex; align-items: center; }
@media (pointer: coarse) { .or-buehnenfuss a { min-height: 44px; } }

.or-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.or-info dt { color: var(--mut); }
.or-info dd { margin: 0; word-break: break-word; }
.or-info p { font-size: 14px; }

/* Papier fuer Dokumente, E-Books, Markdown */
.or-papier {
  max-width: 820px; margin: 20px auto; background: var(--flaeche); color: var(--ink);
  border: 1px solid var(--linie); border-radius: 6px; box-shadow: var(--schatten);
  padding: clamp(20px, 5vw, 64px) clamp(18px, 6vw, 72px); font-size: calc(17px * var(--or-zoom, 1)); line-height: 1.65;
  overflow-wrap: anywhere;
}
.or-papier.serif { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; }
.or-papier h1, .or-papier h2, .or-papier h3, .or-papier h4 { font-family: var(--sans); line-height: 1.25; }
.or-papier img { max-width: 100%; height: auto; }
.or-papier table { border-collapse: collapse; margin: 1em 0; width: 100%; display: block; overflow-x: auto; }
.or-papier td, .or-papier th { border: 1px solid var(--linie-2); padding: 6px 8px; vertical-align: top; }
.or-papier td > p { margin: 0; }
.or-papier blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid var(--linie-2); color: var(--ink-2); }
.or-papier pre { white-space: pre-wrap; background: var(--flaeche-2); padding: 12px; border-radius: 8px; }
.or-papier hr.seitenumbruch { border: 0; border-top: 2px dashed var(--linie-2); margin: 2.4em -1em; position: relative; }
.or-papier hr.seitenumbruch::after { content: "Seitenumbruch"; position: absolute; left: 50%; top: -.8em; transform: translateX(-50%); background: var(--flaeche); padding: 0 8px; font: 12px var(--sans); color: var(--mut); }
.or-papier hr.seitenumbruch.weich::after { content: "Seite endete hier (zuletzt vom Programm berechnet)"; }
.or-papier .fussnoten { font-size: .88em; border-top: 1px solid var(--linie); margin-top: 2em; padding-top: 1em; }
.or-papier .fehlt { font: 12px var(--sans); color: var(--mut); border: 1px dashed var(--linie-2); padding: 2px 6px; border-radius: 4px; }
.or-papier mark, mark.or-treffer { background: var(--markiert); color: inherit; border-radius: 2px; }
mark.or-treffer.aktiv { background: var(--markiert-aktiv); outline: 2px solid var(--markiert-aktiv); }

/* PDF */
.or-pdf-seiten { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px 12px 40px; }
.or-pdf-seiten.zweiseitig { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; }
.or-pdf-seite { position: relative; background: #fff; box-shadow: var(--schatten); flex: none; }
.or-pdf-seite canvas { display: block; }
.or-pdf-seite .textLayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; opacity: 1; text-align: initial; }
.or-pdf-seite .textLayer span, .or-pdf-seite .textLayer br { color: transparent; position: absolute; white-space: pre; transform-origin: 0 0; cursor: text; }
.or-pdf-seite .textLayer ::selection { background: rgba(7, 82, 97, .35); }
.or-pdf-seite .textLayer .or-pdf-treffer { background: rgba(245, 158, 11, .45); border-radius: 2px; }
.or-pdf-seitennr { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--mut); }
.or-seitenbild { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; padding: 16px; }
.or-kachel { background: var(--flaeche); border: 2px solid var(--linie); border-radius: 10px; padding: 8px; display: grid; gap: 6px; justify-items: center; }
.or-kachel[aria-selected="true"] { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.or-kachel.ist-gezogen { opacity: .4; }
.or-kachel.ist-ziel { border-style: dashed; border-color: var(--akzent); }
.or-kachel canvas { max-width: 100%; height: auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.or-kachel-knoepfe { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.or-kachel-knoepfe .btn { min-height: 40px; min-width: 40px; width: 40px; padding: 0; }
@media (pointer: coarse) { .or-kachel-knoepfe .btn { min-height: 44px; min-width: 44px; width: 44px; } }
.or-kachel-nr { font-size: 13px; color: var(--mut); }

/* Code / Text (virtualisiert) */
.or-code { font: calc(13.5px * var(--or-zoom, 1)) / 1.55 var(--mono); position: relative; min-height: 100%; background: var(--flaeche); }
.or-code-zeile { display: flex; white-space: pre; height: var(--zh); }
.or-code.umbruch .or-code-zeile { white-space: pre-wrap; height: auto; }
.or-code-nr { flex: none; width: var(--nrb, 5ch); padding: 0 12px 0 8px; text-align: right; color: var(--mut); user-select: none; border-right: 1px solid var(--linie); background: var(--flaeche-2); }
.or-code-text { padding: 0 12px; flex: 1; min-width: 0; }
.tk-schluessel, .tk-tag { color: #0b4f6c; font-weight: 600; }
.tk-zeichenkette { color: #7a2e0e; }
.tk-zahl { color: #5b21b6; }
.tk-schluesselwort { color: #9d174d; font-weight: 600; }
.tk-kommentar { color: #4b5563; font-style: italic; }
.tk-attribut, .tk-funktion { color: #155e75; }
.tk-zeichen { color: #334155; }
.tk-abschnitt { color: #0b4f6c; font-weight: 700; }
.tk-variable { color: #7c2d12; }
.tk-fehler { color: #991b1b; font-weight: 700; background: #fee2e2; }
.tk-warnung { color: #7c2d12; font-weight: 700; background: #ffedd5; }
.tk-info { color: #14532d; font-weight: 600; }
.tk-leise, .tk-zeit { color: #475569; }
html[data-farbschema="dunkel"] .tk-schluessel, html[data-farbschema="dunkel"] .tk-tag, html[data-farbschema="dunkel"] .tk-abschnitt { color: #7dd3fc; }
html[data-farbschema="dunkel"] .tk-zeichenkette { color: #fdba74; }
html[data-farbschema="dunkel"] .tk-zahl { color: #d8b4fe; }
html[data-farbschema="dunkel"] .tk-schluesselwort { color: #f9a8d4; }
html[data-farbschema="dunkel"] .tk-kommentar, html[data-farbschema="dunkel"] .tk-leise, html[data-farbschema="dunkel"] .tk-zeit { color: #a8b3c0; }
html[data-farbschema="dunkel"] .tk-attribut, html[data-farbschema="dunkel"] .tk-funktion { color: #67e8f9; }
html[data-farbschema="dunkel"] .tk-zeichen { color: #cbd5e1; }
html[data-farbschema="dunkel"] .tk-variable { color: #fcd34d; }
html[data-farbschema="dunkel"] .tk-fehler { color: #fecaca; background: #450a0a; }
html[data-farbschema="dunkel"] .tk-warnung { color: #fed7aa; background: #431407; }
html[data-farbschema="dunkel"] .tk-info { color: #bbf7d0; }

/* JSON-Baum */
.or-baum { font: calc(14px * var(--or-zoom, 1)) / 1.6 var(--mono); padding: 12px 16px; background: var(--flaeche); min-height: 100%; }
.or-baum details { margin-left: 16px; }
.or-baum > details { margin-left: 0; }
.or-baum summary { cursor: pointer; min-height: 28px; }
.or-baum .or-blatt { margin-left: 16px; padding: 1px 0; }
.or-baum .or-pfad-knopf { border: 0; background: none; color: var(--mut); cursor: pointer; font: inherit; padding: 0 4px; }

/* Tabellen */
.or-tabelle-kopf { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 14px; background: var(--flaeche); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 3; }
.or-tabelle-kopf label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--mut); }
.or-tabelle-kopf select, .or-tabelle-kopf input { min-height: 44px; padding: 0 10px; border: 1px solid var(--linie-2); border-radius: 8px; background: var(--flaeche); color: var(--ink); font: 14.5px var(--sans); }
.or-blaetter { display: flex; gap: 4px; flex-wrap: wrap; }
.or-blaetter button { min-height: 40px; padding: 0 12px; border: 1px solid var(--linie-2); border-radius: 8px; background: var(--flaeche); color: var(--ink-2); cursor: pointer; font: 600 14px var(--sans); }
.or-blaetter button[aria-selected="true"] { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.or-raster-huelle { overflow: auto; }
table.or-raster { border-collapse: separate; border-spacing: 0; font-size: calc(14px * var(--or-zoom, 1)); background: var(--flaeche); min-width: 100%; }
table.or-raster th, table.or-raster td { border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 6px 10px; white-space: pre-wrap; max-width: 420px; vertical-align: top; text-align: left; }
table.or-raster thead th { position: sticky; top: 0; background: var(--flaeche-2); z-index: 2; font-weight: 700; }
table.or-raster thead th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
table.or-raster thead th button:focus-visible { outline: 3px solid var(--fokus); }
table.or-raster th.or-znr, table.or-raster td.or-znr { position: sticky; left: 0; background: var(--flaeche-2); color: var(--mut); text-align: right; font-variant-numeric: tabular-nums; z-index: 1; }
table.or-raster thead th.or-znr { z-index: 3; }
table.or-raster td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .or-werkbank-hilfe { display: none !important; } }
.or-mehr { display: flex; gap: 10px; align-items: center; padding: 12px 14px; font-size: 14px; color: var(--mut); }

/* Bilder */
/* Designdateien (PSD, EPS, AI): Vorschau mit benannter Quelle, Eckdaten, Ebenen */
.or-design-buehne { display: grid; place-items: center; padding: 16px; border-radius: 10px; overflow: auto; max-height: 70dvh; background-image: conic-gradient(var(--flaeche-2) 25%, var(--flaeche) 0 50%, var(--flaeche-2) 0 75%, var(--flaeche) 0); background-size: 20px 20px; }
.or-design-bild { width: calc(min(100%, var(--b, 100%)) * var(--or-zoom, 1)); max-width: none; height: auto; image-rendering: auto; box-shadow: 0 1px 4px rgb(0 0 0 / .18); }
.or-design-quelle { margin: 8px 0 18px; font-size: 14px; color: var(--mut); }
.or-design-daten { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.or-design-daten dt { color: var(--mut); }
.or-design-daten dd { margin: 0; overflow-wrap: anywhere; }
.or-design-ebenen { padding-left: 22px; }
.or-design-ebenen li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--linie); }
.or-design-ebene-info { color: var(--mut); font: 13px var(--mono); white-space: nowrap; }
@media (max-width: 560px) { .or-design-daten { grid-template-columns: minmax(0, 1fr); } .or-design-daten dd { margin-bottom: 6px; } .or-design-ebenen li { flex-direction: column; gap: 0; } }
.or-bild-huelle { min-height: 100%; display: grid; place-items: center; padding: 20px; background-image: conic-gradient(var(--flaeche-2) 25%, var(--flaeche) 0 50%, var(--flaeche-2) 0 75%, var(--flaeche) 0); background-size: 20px 20px; }
.or-bild-huelle img, .or-bild-huelle canvas { max-width: calc(100% * var(--or-zoom, 1)); height: auto; box-shadow: var(--schatten); image-rendering: auto; }
.or-bild-huelle.pixel img, .or-bild-huelle.pixel canvas { image-rendering: pixelated; }

/* Hex */
.or-hex { font: 13px/1.6 var(--mono); padding: 12px 16px; background: var(--flaeche); white-space: pre; min-height: 100%; }

/* Editor */

/* Export */
.or-export { max-width: 880px; margin: 20px auto; padding: 0 16px 40px; display: grid; gap: 10px; }
.or-export-karte { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; }
.or-export-karte h3 { margin: 0; font-size: 16px; }
.or-export-karte p { margin: 0; color: var(--mut); font-size: 14.5px; grid-column: 1; }
.or-export-karte .btn { grid-column: 2; grid-row: 1 / span 2; }
.or-export-optionen { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: var(--mut); grid-column: 1; }
.or-export-optionen select { min-height: 40px; border-radius: 8px; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--ink); padding: 0 8px; }
@media (max-width: 600px) { .or-export-karte { grid-template-columns: 1fr; } .or-export-karte .btn { grid-column: 1; grid-row: auto; justify-self: start; } }

/* ── Schmale Bildschirme: der Inhalt bekommt den Platz ──────────
   Gemessen auf 375 x 780 (erste Fassung): Kopf, Leisten und Schnellaktionen
   belegten 470 px, die Arbeitsflaeche 257 px (33 %). Jetzt: eine Zeile Datei,
   eine Zeile Modi, Schnellaktionen und Tabellenoptionen je als wischbare
   Zeile, Suche hinter einem Symbol. */
#orSucheKnopf { display: none; }
@media (max-width: 719.98px) {
  .or-leiste { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 6px 10px; }
  .or-datei { grid-column: 1; grid-row: 1; flex: none; min-width: 0; }
  .or-leiste > .or-gruppe:last-child { grid-column: 2; grid-row: 1; }
  .or-modi { grid-column: 1 / -1; grid-row: 2; display: flex; }
  .or-modi button { flex: 1; min-height: 44px; }
  .or-suche { grid-column: 1 / -1; grid-row: 3; display: none; }
  .or-leiste.suche-offen .or-suche { display: flex; }
  .or-suche input { flex: 1; width: auto; min-width: 0; }
  .or-leiste > .or-gruppe[aria-label="Zoom"], #orVollbild, #orNeu { display: none; }
  .or-leiste > .or-gruppe[aria-label="Verlauf"] { grid-column: 1 / -1; grid-row: 4; }
  .or-leiste > .or-gruppe[aria-label="Verlauf"]:not(:has(button:not([hidden]))) { display: none; }
  #orSucheKnopf { display: inline-flex; }
  .or-typ { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .or-schnell, .or-tabelle-kopf { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .or-schnell::-webkit-scrollbar, .or-tabelle-kopf::-webkit-scrollbar { display: none; }
  .or-schnell > *, .or-tabelle-kopf > * { flex: none; }
  .or-schnell { padding-top: 4px; padding-bottom: 4px; }
  .or-schnell-titel { display: none; }
  .or-tabelle-kopf label { white-space: nowrap; }
  .or-tabelle-kopf input[type="search"] { width: 150px; }
  .or-buehnenfuss { padding: 0 10px; }
  .or-buehnenfuss a { min-height: 36px; }
  .or-papier { margin: 8px; padding: 18px 16px; }
  html[data-or-modus="arbeit"] .re-kopf { min-height: 48px; padding: 2px 10px; }
  html[data-or-modus="arbeit"] .re-marke small, html[data-or-modus="arbeit"] .re-kopf .or-nur-breit { display: none; }
}
/* E-Rechnung im Reader */
/* Bezeichnung (2. Spalte) linksbuendig und umbrechend -- im Bestandsviewer
   stand sie rechtsbuendig, weil nur die 1. Spalte (Nr.) ausgenommen war. */
.invoice-table th:nth-child(2), .invoice-table td:nth-child(2) { text-align: left; white-space: normal; }
.or-beleg { max-width: 980px; margin: 16px auto; padding: 0 14px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.or-beleg > *, .or-beleg .invoice-summary > * { min-width: 0; }
.or-beleg .tool-card { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(14px, 3vw, 22px); }
.or-beleg .tool-card-title { margin: 0 0 12px; font-size: 18px; }
.or-beleg .tool-card-hint { color: var(--mut); font-size: 14.5px; margin: 0 0 12px; }
.or-beleg .tool-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.or-beleg .btn-primary { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.or-beleg .btn-ghost { background: var(--flaeche); }
.or-beleg .bd-blatt { color: #14171f; }
.attachment-badge { display: inline-block; margin: 0 0 12px; font-size: 13px; padding: 4px 10px; border-radius: 8px; background: var(--gut-bg); color: var(--gut); }
.attachment-badge.is-missing { background: var(--warn-bg); color: var(--warn); }
.sum-check { border-radius: 10px; padding: 12px 14px; margin: 12px 0 0; font-size: 14.5px; }
.sum-check.is-ok { background: var(--gut-bg); color: var(--gut); }
.sum-check.is-warn { background: var(--warn-bg); color: var(--warn); }
.sum-check-title { margin: 0 0 4px; font-weight: 700; }
.sum-check ul { margin: 6px 0; padding-left: 20px; }
.sum-check-note { margin: 4px 0 0; font-size: 13.5px; }
.invoice-extra { margin-top: 16px; }
.invoice-extra h3 { font-size: 15px; margin: 0 0 6px; }
.attachment-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.attachment-list li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }

/* ── Druck ──────────────────────────────────────────────────────────
   Gedruckt wird immer genau EIN Ziel: der A4-Beleg (data-druck="beleg")
   oder der Druckbereich des Readers (data-druck="ansicht"), nie die
   Oberflaeche. */
#orDruck { display: none; }
@media print {
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; }
  .re-kopf, .skip-link, .or-leiste, .or-schnell, .or-hinweiszeile, .or-seitenleiste, .or-inspektor, .or-buehnenfuss, .or-fuss, .or-toast { display: none !important; }
  html[data-druck="ansicht"] #main { display: none !important; }
  html[data-druck="ansicht"] #orDruck { display: block !important; }
  html[data-druck="beleg"] #main > :not(#orArbeit), html[data-druck="beleg"] #orAnsicht > :not(#orBeleg), html[data-druck="beleg"] #orBeleg > :not(#cardDokument) { display: none !important; }
  html[data-druck="beleg"] .or-flaeche, html[data-druck="beleg"] .or-buehne, html[data-druck="beleg"] .or-arbeit, html[data-druck="beleg"] #main { display: block !important; overflow: visible !important; }
  html[data-druck="beleg"] .or-beleg { padding: 0; margin: 0; max-width: none; }
  html[data-druck="beleg"] #cardDokument { border: 0; padding: 0; }
  html[data-druck="beleg"] .or-hero, html[data-druck="beleg"] .or-ablage { display: none !important; }
  html[data-druck="beleg"] #cardDokument .tool-card-title, html[data-druck="beleg"] #cardDokument .tool-card-hint, html[data-druck="beleg"] .bd-leiste { display: none !important; }
  html[data-druck="beleg"] .bd-buehne { overflow: visible; background: none; padding: 0; height: auto !important; }
  html[data-druck="beleg"] .bd-blaetter { --bd-skala: 1 !important; gap: 0; width: auto; transform: none !important; }
  html[data-druck="beleg"] .bd-blatt { box-shadow: none; break-after: page; break-inside: avoid; }
  html[data-druck="beleg"] .bd-blatt:last-child { break-after: auto; }
  html[data-druck="beleg"] { --kuk-wm-deckkraft: 0.25; }
}
@page { size: A4; margin: 16mm 16mm; }
/* Das Begleitdokument ist selbst 210 x 297 mm gross: seine Seiten ohne Rand. */
@page beleg { size: A4 portrait; margin: 0; }
@media print {
  html[data-druck="beleg"] .bd-blatt { page: beleg; }
  .bd-blatt .kuk-wm { position: absolute; }
  .bd-blatt .kuk-wm-oben-links, .bd-blatt .kuk-wm-unten-links { left: var(--kuk-wm-rand); right: auto; }
  .bd-blatt .kuk-wm-oben-rechts, .bd-blatt .kuk-wm-unten-rechts { right: var(--kuk-wm-rand); left: auto; }
  .bd-blatt .kuk-wm-oben-links, .bd-blatt .kuk-wm-oben-rechts { top: var(--kuk-wm-oben); bottom: auto; }
  .bd-blatt .kuk-wm-unten-links, .bd-blatt .kuk-wm-unten-rechts { bottom: var(--kuk-wm-unten); top: auto; }
}

/* ── Uebernommen aus dem XRechnung-Viewer (Beleganzeige und A4-Blaetter) ── */
.tool-status { font-size: 14px; color: var(--ink-3); min-height: 1.4em; }
.tool-status[data-state="error"] { color: var(--warn-ink); }
.tool-status[data-state="done"] { color: var(--green); font-weight: 600; }
.tool-status[data-state="warn"] { color: var(--warn-ink); font-weight: 600; }
.invoice-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 24px;
  margin: 0 0 20px;
}
.invoice-summary-block h3 {
  margin: 0 0 6px; font-size: 12px; color: var(--ink-4); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700;
}
.invoice-summary-block p { margin: 0 0 2px; font-size: 14px; color: var(--ink-2); }
.invoice-summary-block .party-name { font-weight: 700; color: var(--ink); }
.party-lines div { font-size: 14px; color: var(--ink-2); }
.party-ids div { font-size: 12.5px; color: var(--ink-4); margin-top: 2px; word-break: break-word; }
.format-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.format-badge {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; color: var(--blue-2);
  background: var(--blue-soft); border-radius: 999px; padding: 4px 12px;
}
.section-title {
  margin: 22px 0 8px; font-size: 12px; color: var(--ink-4); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700;
}
.invoice-meta-list { list-style: none; margin: 0; padding: 0; }
.invoice-meta-list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.invoice-meta-list li:first-child { border-top: none; }
.invoice-meta-list li b { color: var(--ink); font-weight: 700; }
.invoice-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 0 20px; }
.invoice-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.invoice-table th, .invoice-table td { text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.invoice-table th:first-child, .invoice-table td:first-child { text-align: left; white-space: normal; }
.invoice-table thead th { color: var(--ink-4); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; background: var(--paper); }
.invoice-table tbody tr:nth-child(even) { background: var(--paper); }
.invoice-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0 0 4px; }
.invoice-totals-row { display: flex; justify-content: space-between; gap: 24px; width: 100%; max-width: 320px; font-size: 14px; color: var(--ink-2); }
.invoice-totals-row.is-grand { font-size: 17px; font-weight: 800; color: var(--blue-2); border-top: 1px solid var(--line-2); padding-top: 6px; margin-top: 2px; }
.invoice-table td.col-num { font-variant-numeric: tabular-nums; }
.invoice-table td.col-nr { text-align: left; color: var(--ink-4); width: 1%; }
.invoice-table td .line-note { display: block; font-size: 12px; color: var(--ink-4); font-weight: 400; margin-top: 2px; }
.sum-check {
  margin: 14px 0 0; padding: 12px 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--green-soft); color: var(--green);
}
.sum-check.is-warn { background: var(--warn-soft); color: var(--warn-ink); }
.sum-check-title { margin: 0; font-size: 14px; font-weight: 700; }
.sum-check ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; }
.sum-check li { margin: 0 0 4px; }
.sum-check code { font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.sum-check-note { margin: 8px 0 0; font-size: 12px; opacity: .85; }
.invoice-extra { margin-top: 22px; }
.invoice-extra h3 {
  margin: 0 0 8px; font-size: 12px; color: var(--ink-4); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700;
}
.invoice-extra p { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }
.invoice-extra .invoice-meta-list { max-width: 520px; margin-bottom: 10px; }
.invoice-extra .invoice-meta-list b { font-variant-numeric: tabular-nums; text-align: right; }
.payment-terms { font-size: 13.5px; color: var(--ink-3); }
.attachment-list { list-style: none; margin: 0; padding: 0; }
.attachment-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.attachment-list li:first-child { border-top: none; }
.attachment-list small { color: var(--ink-4); font-size: 12.5px; }
.attachment-list .btn { margin-left: auto; }
.attachment-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--green);
  background: var(--green-soft); border-radius: 999px; padding: 4px 12px; margin: 0 0 14px;
}
.attachment-badge.is-missing { color: var(--warn-ink); background: var(--warn-soft); }
.bd-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 4px 0 14px;
}
.bd-leiste .bd-seiteninfo { font-size: 13px; color: var(--ink-4); font-weight: 600; }
.bd-zoom { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.bd-buehne { overflow-x: auto; overflow-y: hidden; background: var(--paper); border-radius: var(--radius-sm); padding: 12px; }
.bd-blaetter {
  --bd-skala: 1;
  transform: scale(var(--bd-skala));
  transform-origin: top left;
  width: 210mm;
  display: flex; flex-direction: column; gap: 12mm; align-items: flex-start;
}
.bd-blatt {
  position: relative;
  width: 210mm; height: 297mm; flex: none;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.18), 0 8px 24px -12px rgba(15,23,42,.28);
  overflow: hidden;
  font-family: Helvetica, Arial, "Liberation Sans", sans-serif;
  color: #14171f;
}
.bd-text {
  position: absolute; z-index: 1; line-height: 1.25; white-space: pre;
}
.bd-linie, .bd-flaeche { position: absolute; z-index: 0; }
.bd-linie { z-index: 1; height: 0; border-top-style: solid; }
.bd-flaeche { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.kuk-wm {
  position: absolute;
  z-index: 0;
  margin: 0;
  font-size: var(--kuk-wm-groesse);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--kuk-wm-farbe);
  opacity: var(--kuk-wm-deckkraft);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.kuk-wm-oben-links { left: var(--kuk-wm-rand); top: var(--kuk-wm-oben); }
.kuk-wm-oben-rechts { right: var(--kuk-wm-rand); top: var(--kuk-wm-oben); }
.kuk-wm-mitte { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.kuk-wm-unten-links { left: var(--kuk-wm-rand); bottom: var(--kuk-wm-unten); }
.kuk-wm-unten-rechts { right: var(--kuk-wm-rand); bottom: var(--kuk-wm-unten); }

/* Startseite: Drop-First (2026-09-28). Die Ablage ist das Zentrum -- H1 und eine Zeile
   darueber, Vertrauen und Formate IN der Karte, Beispiele darunter. Rechts (ab 960 px,
   65/35) eine helle, ruhige A4-Skizze statt des dunklen Mockups; auf dem Telefon entfaellt
   sie. Keine Endlosanimation, kein Pulsieren (Motion-System: keine pulsierenden CTAs).
   Farben ueber Tokens -- dasselbe gilt im dunklen Schema. */
.or-hero { padding-top: clamp(18px, 4vw, 44px); }
.or-hero-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
@media (min-width: 960px) { .or-hero-raster { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 40px; } }
.or-hero-text { min-width: 0; }
.or-hero h1 { margin-top: 0; }
.or-hero .or-lede { margin-bottom: 18px; }

.or-ablage-karte { position: relative; }
.or-hero .or-ablage { min-height: clamp(220px, 32vh, 300px); gap: 10px; border: 2px dashed var(--linie-2); border-radius: 16px; background: var(--flaeche-2); padding: 44px 20px 58px; transition: border-color .15s ease, background-color .15s ease; }
.or-hero .or-ablage:hover, .or-hero .or-ablage.ist-drueber { border-color: var(--akzent); border-style: solid; background: var(--akzent-weich); }
.or-hero .or-ablage-symbol { width: 48px; height: 48px; }
.or-ablage-knopf { min-height: 48px; padding: 0 26px; font-size: 16.5px; border-radius: 10px; box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--akzent) 70%, transparent); }
.or-hero .or-ablage-hinweis { font-size: 15px; }
/* Vertrauen oben rechts IM Rahmen -- Farben aus den Tokens --gut/--gut-bg (AAA: 8,4:1 hell) */
.or-vertrauen { position: absolute; top: 12px; right: 12px; z-index: 1; margin: 0; padding: 5px 11px; border-radius: 999px; background: var(--gut-bg); color: var(--gut); border: 1px solid color-mix(in srgb, var(--gut) 25%, transparent); font-size: 13px; font-weight: 700; pointer-events: none; }
/* Ordner und Formate im Fuss der Karte: ausserhalb des label, weil Links darin nicht verschachtelt sein duerfen */
.or-hero .or-ablage-ordner { position: absolute; left: 0; right: 0; bottom: 34px; margin: 0; text-align: center; pointer-events: none; }
.or-textknopf { pointer-events: auto; min-height: 32px; padding: 2px 8px; border: 0; background: none; color: var(--akzent); font: 600 14.5px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 6px; }
.or-textknopf:hover { text-decoration-thickness: 2px; }
.or-textknopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.or-format-zeile { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; padding: 0 16px; text-align: center; font: 14px/1.5 var(--sans); color: var(--mut); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-format-zeile a { pointer-events: auto; color: var(--akzent); }
@media (pointer: coarse) { .or-textknopf { min-height: 44px; } }
@media (max-width: 480px) { .or-format-zeile { white-space: normal; bottom: 6px; } .or-hero .or-ablage { padding-bottom: 78px; } .or-hero .or-ablage-ordner { bottom: 46px; } .or-vertrauen { font-size: 12px; } }

/* A4-Skizze: aria-hidden, rein darstellend -- was nach dem Ablegen kommt */
.or-hero-buehne { display: none; min-width: 0; }
@media (min-width: 960px) { .or-hero-buehne { display: block; } }
.or-a4 { border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche); box-shadow: 0 18px 40px -26px rgba(15, 23, 42, .35); overflow: hidden; font-size: 12.5px; }
.or-a4-kopf { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--linie); background: var(--flaeche-2); }
.or-a4-typ { padding: 2px 8px; border-radius: 999px; background: var(--akzent-weich); color: var(--akzent); font-weight: 700; }
.or-a4-name { color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-a4-koerper { display: grid; grid-template-columns: 34% 1fr; gap: 12px; padding: 14px 12px; background: var(--flaeche-2); }
.or-a4-inhalt { list-style: none; margin: 0; padding: 0; color: var(--mut); }
.or-a4-inhalt li { padding: 5px 8px; border-radius: 6px; }
.or-a4-inhalt li.an { background: var(--akzent-weich); color: var(--akzent); font-weight: 700; }
.or-a4-blatt { display: grid; gap: 7px; align-content: start; aspect-ratio: 1 / 1.3; padding: 14px 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px; box-shadow: 0 4px 20px rgba(15, 23, 42, .06); }
.or-a4-blatt i { height: 5px; border-radius: 3px; background: var(--linie); }
.or-a4-blatt i.h { width: 55%; height: 8px; background: color-mix(in srgb, var(--akzent) 55%, var(--linie)); }
.or-a4-blatt i.kurz { width: 62%; }
.or-a4-tabelle { display: grid; grid-template-columns: 2fr 1fr; gap: 4px; margin: 4px 0; }
.or-a4-tabelle b { height: 12px; border-radius: 3px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.or-a4-summe { justify-self: end; font: 700 13px var(--mono); color: var(--ink); }
.or-a4-probe { margin: 0; padding: 9px 12px; border-top: 1px solid var(--linie); background: var(--gut-bg); color: var(--gut); font-weight: 700; }

/* Hex-Ansicht: Leiste, Zeichenketten, markierte Zeile */
.or-hex-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--linie); background: var(--flaeche-2); }
.or-hex-feld { min-height: 40px; width: 12ch; padding: 0 8px; border: 1px solid var(--linie-2); border-radius: 8px; background: var(--flaeche); color: var(--ink); font: 13px var(--mono); }
.or-hex-stand { margin-left: auto; font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; }
.or-hex mark { background: var(--akzent-weich); color: var(--ink); outline: 2px solid var(--akzent); }
.or-hex-ketten { max-height: 34vh; overflow: auto; border-bottom: 1px solid var(--linie); padding: 6px 12px; }
.or-hex-ketten ul { list-style: none; margin: 0; padding: 0; }
.or-hex-kette { display: flex; gap: 8px; align-items: baseline; width: 100%; min-height: 32px; padding: 2px 6px; border: 0; background: none; color: var(--ink); text-align: left; font: 13px var(--mono); cursor: pointer; border-radius: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.or-hex-kette:hover, .or-hex-kette:focus-visible { background: var(--akzent-weich); }
.or-hex-kette code { color: var(--mut); flex: none; }
.or-hex-kette small { flex: none; font-size: 11px; padding: 0 4px; border-radius: 4px; background: var(--flaeche-2); color: var(--mut); }
@media (pointer: coarse) { .or-hex-kette { min-height: 44px; } }

/* Geodaten: Karte ohne Kacheln, Kennzahlen daneben (unter 960 px darunter) */
.or-geo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 12px; }
@media (min-width: 960px) { .or-geo { grid-template-columns: minmax(0, 1fr) 300px; } }
.or-geo-buehne { position: relative; min-width: 0; }
.or-geo-karte { display: block; width: 100%; height: min(62vh, 560px); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); touch-action: none; cursor: grab; }
.or-geo-karte:active { cursor: grabbing; }
.or-geo-karte:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.or-geo-werkzeuge { position: absolute; top: 10px; right: 10px; display: grid; gap: 6px; }
.or-geo-werkzeuge .btn { background: var(--flaeche); }
.or-geo-hinweis { margin: 6px 0 0; font-size: 13px; color: var(--mut); }
.or-geo-seite h2 { margin: 0 0 8px; font-size: 18px; }
.or-geo-zahlen { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14.5px; }
.or-geo-zahlen dt { color: var(--mut); } .or-geo-zahlen dd { margin: 0; font-variant-numeric: tabular-nums; }
.or-geo-orte { margin: 0; padding-left: 18px; font-size: 14px; max-height: 30vh; overflow: auto; }

/* Audio/Video-Metadaten */
.or-medien h3 { margin: 18px 0 6px; font-size: 16px; }
.or-medien-liste { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.or-medien-liste dt { color: var(--mut); } .or-medien-liste dd { margin: 0; font-variant-numeric: tabular-nums; }

/* DXF-Zeichnung */
.or-cad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 12px; }
@media (min-width: 960px) { .or-cad { grid-template-columns: minmax(0, 1fr) 280px; } }
.or-cad-buehne { min-width: 0; }
.or-cad-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.or-cad-leiste [aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.or-cad-koord { margin-left: auto; font: 13px var(--mono); color: var(--mut); font-variant-numeric: tabular-nums; }
.or-cad-flaeche { display: block; width: 100%; height: min(66vh, 620px); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); touch-action: none; cursor: grab; }
.or-cad-flaeche.ist-messen { cursor: crosshair; }
.or-cad-flaeche:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.or-cad-seite h2 { margin: 0 0 8px; font-size: 18px; } .or-cad-seite h3 { margin: 14px 0 6px; font-size: 15px; }
.or-cad-ebenen { list-style: none; margin: 0; padding: 0; max-height: 36vh; overflow: auto; }
.or-cad-ebenen label { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; cursor: pointer; }
.or-cad-ebenen input { width: 18px; height: 18px; accent-color: var(--akzent); }
.or-cad-ebenen small { color: var(--mut); }
.or-cad-farbe { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--linie-2); flex: none; }
@media (pointer: coarse) { .or-cad-ebenen label { min-height: 44px; } }

/* ── Studio-Schliff der Arbeitsansicht (2026-09-28) ──
   Schnellaktionen als flache Pillen; Text/Code als Blatt mit Abstand (Rand statt
   Innenabstand: die Virtualisierung rechnet mit offsetTop, das den Rand mitzaehlt);
   Inspektor mit Mikrolabels ueber dem Wert statt gequetschter Zweispaltentabelle.
   Farben aus den Tokens -- --mut bleibt #334155, weil #64748B auf Weiss nur
   4,8:1 haette und die AAA-Pruefung (7:1) verfehlt. */
.or-schnell .btn { border-color: var(--linie); border-radius: 8px; background: var(--flaeche); padding: 0 12px; }
.or-schnell .btn:hover { background: var(--akzent-weich); border-color: color-mix(in srgb, var(--akzent) 40%, var(--linie)); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .or-schnell .btn { transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
  .or-schnell .btn:hover { transform: translateY(-1px); }
}
.or-code { margin: 16px; min-height: calc(100% - 32px); border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(15, 23, 42, .05); line-height: 1.6; font-size: calc(13.5px * var(--or-zoom, 1)); }
.or-code-text { padding: 0 16px; }
.or-info h2 { margin-bottom: 4px; }
.or-info dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
.or-info dt { margin-top: 12px; font: 600 11.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
.or-info dd { margin: 2px 0 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.or-inspektor { padding: 16px; }

/* Dateivergleich: Satz oben, zwei Spalten mit Zeilennummern, Woerter markiert.
   Weggefallenes rot und durchgestrichen, Neues gruen und unterstrichen -- die
   Bedeutung haengt nicht allein an der Farbe (WCAG 1.4.1). */
.or-vgl { padding: 16px; display: grid; gap: 12px; }
.or-vgl-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.or-vgl-dateien { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.or-vgl-datei { display: grid; min-width: 0; }
.or-vgl-datei small { color: var(--mut); font-size: 12.5px; }
.or-vgl-datei strong { overflow-wrap: anywhere; }
.or-vgl-pfeil { color: var(--mut); font-size: 18px; }
.or-vgl-satz { margin: 0; padding: 10px 14px; border-radius: 10px; font-weight: 700; background: var(--warn-bg); color: var(--warn); }
.or-vgl-satz[data-stufe="gleich"] { background: var(--gut-bg); color: var(--gut); }
.or-vgl-steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.or-vgl-darstellung { display: inline-flex; border: 1px solid var(--linie-2); border-radius: 10px; padding: 2px; background: var(--flaeche-2); }
.or-vgl-darstellung button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 600 14px var(--sans); cursor: pointer; }
.or-vgl-darstellung button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); }
.or-vgl-sprung { display: inline-flex; gap: 6px; margin-left: auto; }
.or-vgl-hinweis { margin: 0; font-size: 14px; color: var(--mut); }
.or-vgl-raster { border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; background: var(--flaeche); font: 13.5px/1.6 var(--mono); }
.or-vgl-zeile { display: grid; }
.or-vgl-raster.neben .or-vgl-zeile { grid-template-columns: 5ch minmax(0, 1fr) 5ch minmax(0, 1fr); }
.or-vgl-raster.unter .or-vgl-zeile { grid-template-columns: 5ch minmax(0, 1fr); }
.or-vgl-zeile > span { padding: 1px 10px; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.or-vgl-zeile .nr { color: var(--mut); text-align: right; background: var(--flaeche-2); user-select: none; padding-right: 8px; }
.or-vgl-raster.neben .or-vgl-zeile .b { border-left: 1px solid var(--linie); }
.or-vgl-zeile.geaendert .a, .or-vgl-zeile.weg .a { background: var(--fehler-bg); }
.or-vgl-zeile.geaendert .b, .or-vgl-zeile.neu .b { background: var(--gut-bg); }
.or-vgl-raster.unter .or-vgl-zeile.neu .a { background: var(--gut-bg); }
/* keine zusaetzliche Toenung hinter dem Wort: sie druckte den Kontrast unter 7:1 (AAA) */
.or-vgl-zeile del { color: var(--fehler); font-weight: 700; text-decoration: line-through; text-decoration-thickness: 2px; }
.or-vgl-zeile ins { color: var(--gut); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.or-vgl-zeile.ist-aktiv { outline: 3px solid var(--fokus); outline-offset: -3px; }
.or-vgl-notiz { grid-column: 1 / -1; padding: 0 10px 4px; font: 12.5px var(--sans); color: var(--mut); }
.or-vgl-eingeklappt { display: flex; justify-content: center; padding: 4px; background: var(--flaeche-2); border-block: 1px solid var(--linie); }
.or-vgl-mehr { min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--akzent); font: 600 13.5px var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.or-vgl-mehr:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.or-vgl-fund { box-shadow: inset 0 0 0 2px var(--akzent); }
.or-vgl-fund.ist-aktiv { box-shadow: inset 0 0 0 3px var(--fokus); }
@media (pointer: coarse) { .or-vgl-darstellung button, .or-vgl-mehr { min-height: 44px; } }
@media (max-width: 560px) { .or-vgl { padding: 10px; } .or-vgl-sprung { margin-left: 0; } .or-vgl-zeile .nr { display: none; } .or-vgl-raster.unter .or-vgl-zeile { grid-template-columns: minmax(0, 1fr); } }

/* Volltextsuche im Ordner: grosses Feld oben, Treffer je Datei mit Zeile und Ausschnitt */
.or-ordner-suche { display: grid; gap: 8px; margin: 4px 0 18px; padding: 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche-2); }
.or-ordner-suchtitel { font-weight: 700; }
.or-ordner-suchfeld { min-height: 48px; padding: 0 14px; border: 1px solid var(--linie-2); border-radius: 10px; background: var(--flaeche); color: var(--ink); font: 16px var(--sans); }
.or-ordner-suchfeld:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; }
.or-ordner-suchstand { margin: 0; min-height: 1.4em; color: var(--mut); font-size: 14.5px; }
.or-ordner-treffer { display: grid; gap: 12px; }
.or-ordner-gruppe h3 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0 0 4px; font-size: 15px; overflow-wrap: anywhere; }
.or-ordner-gruppe h3 small { color: var(--mut); font-weight: 600; }
.or-ordner-stellen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; background: var(--flaeche); }
.or-ordner-stellen li + li { border-top: 1px solid var(--linie); }
.or-ordner-stelle { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: var(--ink); text-align: left; font: 14px/1.5 var(--sans); cursor: pointer; }
.or-ordner-stelle:hover { background: var(--akzent-weich); }
.or-ordner-stelle:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }
.or-ordner-zeile { color: var(--mut); font-variant-numeric: tabular-nums; }
.or-ordner-auszug { overflow-wrap: anywhere; }
.or-ordner-auszug mark { background: var(--akzent-weich); color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--akzent); border-radius: 2px; }
@media (max-width: 560px) { .or-ordner-stelle { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.or-ordner-gruppenkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 4px; }
.or-ordner-gruppenkopf h3 { flex: 1 1 16em; margin: 0; }
.or-ordner-archiv { color: var(--ink-2); font-weight: 600; }
.or-ordner-im { color: var(--mut); }
/* Zwei Dateien vergleichen: gewaehlte Datei bleibt sichtbar markiert, ein Satz sagt, was als Naechstes kommt */
.or-ordner-aktionen { white-space: nowrap; }
.or-ordner-aktionen .btn + .btn { margin-left: 6px; }
.or-ordner-vgl[aria-pressed="true"] { background: var(--akzent-weich); border-color: var(--akzent); color: var(--ink); }
/* Schmal: Name über die volle Breite, darunter Größe und Knöpfe -- sonst quetscht die Tabelle den Namen auf ein Zeichen je Zeile */
@media (max-width: 560px) {
  .or-ordner-dateien thead { display: none; }
  .or-ordner-dateien tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
  .or-ordner-dateien td { display: block; padding: 0; border: 0; }
  .or-ordner-dateien td:first-child { grid-column: 1 / -1; overflow-wrap: anywhere; font-weight: 600; }
  .or-ordner-dateien td.zahl { text-align: left; color: var(--mut); }
  .or-ordner-aktionen { white-space: normal; text-align: right; }
}
.or-ordner-wahl { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: var(--akzent-weich); color: var(--ink); font-weight: 600; }