/* Dokumentenlenkung · produktbezogene Komposition auf Leadity 1.2.18 */
.product-card { padding: var(--leadity-space-7); }
.view-stack { min-width: 0; display: grid; gap: var(--leadity-space-5); }
.view-stack > *, .toolbar > *, .reader-layout > *, .editor-layout > *, .notice > *, .thread-head > * { min-width: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--leadity-space-4); }
.section-head h2, .panel-title { font: 700 18px/24px var(--font-display); letter-spacing: .1px; color: var(--leadity-text-dark); }
.section-copy { max-width: 1000px; color: var(--leadity-text-default); }
.meta { color: var(--leadity-text-light); font-size: 14px; }
.toolbar, .chip-row, .button-row, .view-toggle, .summary-row, .inline-fields { display: flex; align-items: center; flex-wrap: wrap; gap: var(--leadity-space-3); }
.button-row { gap: var(--leadity-space-4); }
.search-field { min-width: min(360px, 100%); position: relative; flex: 1 1 320px; }
.search-field i { position: absolute; inset: 50% auto auto var(--leadity-space-4); transform: translateY(-50%); color: var(--leadity-text-light); }
.search-field input { width: 100%; height: var(--leadity-control-default); padding: var(--leadity-space-3) var(--leadity-space-4) var(--leadity-space-3) var(--leadity-space-8); border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-sm); color: var(--leadity-text-default); background: var(--leadity-white); font: 400 16px/24px var(--font-body); }
.filter-button, .segment { min-height: var(--leadity-control-default); display: inline-flex; align-items: center; gap: var(--leadity-space-3); padding-inline: var(--leadity-space-4); border: 0; border-radius: var(--leadity-radius-full); background: var(--leadity-white); color: var(--leadity-text-default); cursor: pointer; }
.filter-button:hover, .segment:hover { background: var(--leadity-neutral-20); }
.segment[aria-pressed="true"] { background: var(--leadity-neutral-80); color: var(--leadity-white); font-weight: 500; }
.view-toggle { padding: var(--leadity-space-1); border-radius: var(--leadity-radius-full); background: var(--leadity-neutral-10); }
.view-toggle .segment { min-width: var(--leadity-control-default); padding-inline: var(--leadity-space-3); }
.table-scroll { overflow-x: auto; border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-40); scrollbar-width: thin; }
.doc-table { width: 100%; min-width: 880px; border-collapse: collapse; table-layout: fixed; }
.doc-table th, .doc-table td { padding: var(--leadity-space-3) var(--leadity-space-4); border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-40); text-align: left; vertical-align: middle; overflow-wrap: anywhere; font: 400 16px/24px var(--font-body); }
.doc-table th { font-weight: 700; color: var(--leadity-text-dark); background: var(--leadity-neutral-10); }
.doc-table tbody tr:hover { background: var(--leadity-neutral-10); }
.doc-table tbody tr:last-child td { border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-40); }
.doc-title-button { min-height: 40px; display: inline-flex; align-items: center; gap: var(--leadity-space-3); padding: 0; border: 0; background: transparent; color: var(--leadity-text-default); font: 700 16px/24px var(--font-body); text-align: left; cursor: pointer; }
.doc-title-button:hover { text-decoration: underline; text-underline-offset: var(--leadity-space-1); }
.chip { min-height: 32px; display: inline-flex; align-items: center; gap: var(--leadity-space-3); padding: var(--leadity-space-3); border-radius: var(--leadity-radius-sm); background: var(--leadity-neutral-10); color: var(--leadity-text-default); font: 400 14px/16px var(--font-body); }
.chip.status-draft { background: var(--leadity-neutral-20); }
.chip.status-review { background: var(--leadity-status-review-surface); color: var(--leadity-status-review-text); }
.chip.status-approved { background: var(--leadity-status-complete-surface); color: var(--leadity-status-complete-text); }
.chip.status-rejected { background: var(--leadity-state-error-background-light); color: var(--leadity-state-error-text); }
.chip.status-archived { background: var(--leadity-neutral-20); color: var(--leadity-text-light); }
.scope-mark { display: inline-flex; align-items: center; gap: var(--leadity-space-2); }
.folder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--leadity-space-5); }
.folder-card { min-height: 160px; padding: var(--leadity-space-6); border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-md); background: var(--leadity-white); text-align: left; cursor: pointer; }
.folder-card:hover { background: var(--leadity-neutral-10); }
.folder-card i { margin-bottom: var(--leadity-space-4); color: var(--leadity-neutral-80); font-size: 24px; }
.state-panel { display: grid; place-items: center; min-height: 260px; padding: var(--leadity-space-8); text-align: center; }
.state-panel i { margin-bottom: var(--leadity-space-4); color: var(--leadity-text-light); font-size: 30px; }
.state-panel h2 { margin-bottom: var(--leadity-space-3); }
.state-panel .button-row { justify-content: center; margin-top: var(--leadity-space-5); }
.notice { display: flex; align-items: flex-start; gap: var(--leadity-space-4); padding: var(--leadity-space-5); border-radius: var(--leadity-radius-md); background: var(--leadity-neutral-10); color: var(--leadity-text-default); }
.notice.warning { background: var(--leadity-state-warning-background-light); color: var(--leadity-state-warning-text); }
.notice.error { background: var(--leadity-state-error-background-light); color: var(--leadity-state-error-text); }
.notice.success { background: var(--leadity-status-complete-surface); color: var(--leadity-status-complete-text); }
.reader-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--leadity-space-7); align-items: start; }
.article { max-width: 1000px; padding: var(--leadity-space-8); border-radius: var(--leadity-radius-lg); background: var(--leadity-white); box-shadow: var(--leadity-shadow-default); }
.article h2 { margin: var(--leadity-space-8) 0 var(--leadity-space-4); font: 700 21px/27px var(--font-display); letter-spacing: .1px; scroll-margin-top: var(--leadity-space-8); }
.article h3 { margin: var(--leadity-space-6) 0 var(--leadity-space-3); font: 700 18px/24px var(--font-display); letter-spacing: .1px; }
.article p, .article li { max-width: 1000px; margin-bottom: var(--leadity-space-4); line-height: 1.6; }
.toc, .side-panel { position: sticky; top: 0; display: grid; gap: var(--leadity-space-4); padding: var(--leadity-space-6); border-radius: var(--leadity-radius-lg); background: var(--leadity-white); box-shadow: var(--leadity-shadow-default); }
.toc a { min-height: 40px; display: flex; align-items: center; border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-40); }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--leadity-space-5); }
.editor-shell { min-width: 0; border-radius: var(--leadity-radius-lg); background: var(--leadity-white); box-shadow: var(--leadity-shadow-default); }
.editor-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--leadity-space-3); padding: var(--leadity-space-4); border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-40); }
.editor-toolbar button { min-width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; border-radius: var(--leadity-radius-full); background: var(--leadity-neutral-10); cursor: pointer; }
.editor-toolbar button:hover { background: var(--leadity-neutral-20); }
.editor-canvas { min-height: 620px; padding: var(--leadity-space-8); }
.editor-canvas:focus-visible { outline: var(--leadity-focus-width) solid var(--leadity-focus-color); outline-offset: calc(-1 * var(--leadity-focus-offset)); box-shadow: none; }
.comment-mark { padding-inline: var(--leadity-space-1); background: var(--leadity-state-warning-background-light); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: var(--leadity-space-1); }
.thread { display: grid; gap: var(--leadity-space-3); padding: var(--leadity-space-4); border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-md); }
.thread[data-state="closed"] { opacity: .72; }
.thread-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--leadity-space-3); }
.thread-reply { padding: var(--leadity-space-3) var(--leadity-space-4); border-radius: var(--leadity-radius-sm); background: var(--leadity-neutral-10); }
.thread-reply p { margin: var(--leadity-space-2) 0 0; }
.metadata-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--leadity-space-3); margin-top: var(--leadity-space-5); }
.editor-outline, .result-list { display: grid; gap: var(--leadity-space-3); }
.editor-outline a { min-height: var(--leadity-control-default); display: flex; align-items: center; padding-inline: var(--leadity-space-3); border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-40); }
.result-list { max-height: 420px; overflow: auto; padding: var(--leadity-space-1); }
.result-list .choice-card { cursor: pointer; }
.source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--leadity-space-5); }
.diff-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--leadity-space-5); }
.change-nav { display: grid; gap: var(--leadity-space-3); align-content: start; }
.change-nav button { min-height: 40px; padding: var(--leadity-space-3) var(--leadity-space-4); border: 0; border-radius: var(--leadity-radius-sm); background: var(--leadity-neutral-10); text-align: left; cursor: pointer; }
.diff-block { display: grid; gap: var(--leadity-space-3); padding: var(--leadity-space-5); border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-40); }
.diff-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--leadity-space-4); }
.diff-column { min-height: 112px; padding: var(--leadity-space-4); border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-sm); background: var(--leadity-white); }
.diff-column > strong { display: block; margin-bottom: var(--leadity-space-3); }
.diff-added { border-inline-start: var(--leadity-line-sm) solid var(--leadity-state-success-background); }
.diff-removed { border-inline-start: var(--leadity-line-sm) solid var(--leadity-state-error-background); text-decoration: line-through; }
.diff-changed { border-inline-start: var(--leadity-line-sm) solid var(--leadity-state-warning-background); }
.timeline { display: grid; gap: 0; }
.timeline-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--leadity-space-5); padding: var(--leadity-space-5) 0; border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-40); }
.permission-grid, .process-chain, .selection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--leadity-space-5); }
.selection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-card { display: grid; gap: var(--leadity-space-3); padding: var(--leadity-space-5); border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-md); cursor: pointer; }
.choice-card:has(input:checked) { border-color: var(--leadity-neutral-80); background: var(--leadity-neutral-10); }
.process-step { position: relative; min-height: 170px; padding: var(--leadity-space-6); border-radius: var(--leadity-radius-md); background: var(--leadity-white); box-shadow: var(--leadity-shadow-default); }
.process-step .step-number { width: 32px; height: 32px; display: inline-grid; place-items: center; margin-bottom: var(--leadity-space-4); border-radius: var(--leadity-radius-full); background: var(--leadity-neutral-80); color: var(--leadity-white); }
.wizard-steps { display: flex; align-items: center; gap: var(--leadity-space-3); overflow-x: auto; }
.wizard-step { min-width: max-content; display: inline-flex; align-items: center; gap: var(--leadity-space-3); }
.wizard-step::before { content: attr(data-step); width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--leadity-radius-full); background: var(--leadity-neutral-20); }
.wizard-step[aria-current="step"]::before { background: var(--leadity-neutral-80); color: var(--leadity-white); }
.structure-list { display: grid; gap: var(--leadity-space-3); list-style: none; padding: 0; margin: 0; }
.structure-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: var(--leadity-space-3); align-items: center; padding: var(--leadity-space-3); border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-40); }
.structure-row input, .structure-row select { width: 100%; min-height: var(--leadity-control-default); padding: var(--leadity-space-3) var(--leadity-space-4); border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-sm); background: var(--leadity-white); color: var(--leadity-text-default); font: 400 16px/24px var(--font-body); }
.side-panel [data-panel][hidden], .thread[hidden] { display: none; }
.catalog-state-actions { display: flex; flex-wrap: wrap; gap: var(--leadity-space-3); }
dialog { width: min(720px, calc(100vw - var(--leadity-space-8))); max-height: calc(100dvh - var(--leadity-space-8)); padding: 0; overflow: auto; border: 0; border-radius: var(--leadity-radius-lg); background: var(--leadity-white); color: var(--leadity-text-default); box-shadow: var(--leadity-shadow-floating); }
dialog::backdrop { background: color-mix(in oklch, var(--leadity-neutral-100) 48%, transparent); }
.dialog-head, .dialog-body, .dialog-footer { padding: var(--leadity-space-6); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--leadity-space-4); border-bottom: var(--leadity-line-xs) solid var(--leadity-neutral-40); }
.dialog-head h2 { font: 700 25px/1.3 var(--font-display); }
.dialog-body { display: grid; gap: var(--leadity-space-6); }
.dialog-footer { display: flex; justify-content: flex-end; gap: var(--leadity-space-4); border-top: var(--leadity-line-xs) solid var(--leadity-neutral-40); }
.field { display: grid; gap: var(--leadity-space-3); }
.field label, .field legend { font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-height: var(--leadity-control-default); padding: var(--leadity-space-3) var(--leadity-space-4); border: var(--leadity-line-xs) solid var(--leadity-neutral-40); border-radius: var(--leadity-radius-sm); color: var(--leadity-text-default); background: var(--leadity-white); font: 400 16px/24px var(--font-body); }
.field textarea { min-height: 120px; resize: vertical; }
.dialog-close { min-width: 44px; height: 44px; border: 0; border-radius: var(--leadity-radius-full); background: var(--leadity-neutral-10); cursor: pointer; }
.is-hidden { display: none !important; }

@media (max-width: 1023px) {
  .folder-grid, .permission-grid, .process-chain, .selection-grid, .source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reader-layout, .editor-layout { grid-template-columns: minmax(0, 1fr); }
  .toc, .side-panel { position: static; }
}
@media (max-width: 479px) {
  .folder-grid, .permission-grid, .process-chain, .selection-grid, .source-grid, .diff-layout, .diff-pair, .structure-row { grid-template-columns: minmax(0, 1fr); }
  .product-card, .article, .editor-canvas { padding: var(--leadity-space-5); }
  .timeline-item { grid-template-columns: minmax(0, 1fr); gap: var(--leadity-space-3); }
  dialog { width: calc(100vw - var(--leadity-space-5)); }
  .dialog-head, .dialog-body, .dialog-footer { padding: var(--leadity-space-5); }
  .dialog-footer, .notice, .thread-head { align-items: stretch; flex-direction: column; }
  .dialog-footer .btn, .notice .btn, .thread .btn { width: 100%; justify-content: center; }
}