/* Nur Anordnung der App. Farben, Maße und Bausteine kommen aus design/ */
html, body { height: 100%; overflow: hidden; }
body { overflow-x: auto; }
#shell { height: 100%; display: flex; min-width: 1180px; } /* darunter rollt die App waagerecht, statt zu zerfallen (D97) */
#left { width: var(--w-left); flex: none; background: var(--bg-panel); border-right: 1px solid var(--line-strong); overflow-y: auto; }
#center { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-app); }
#right { width: var(--w-right); flex: none; background: var(--bg-panel); border-left: 1px solid var(--line-strong); overflow-y: auto; }

.side { display: flex; flex-direction: column; gap: var(--space-1); }
.side > .ds-name, .side > .tf-muted, .side > .switch-row, .side > .cov, .side-note, .row-title, .facts, .pg, .edit-row, .side > .tf-seg { margin-left: var(--space-2); }
.side > .switch-row, .side > .cov { margin-right: 0; }
.side .tf-note { margin: var(--space-1) 0; }
.side .tf-btn { margin-top: var(--space-2); }
.h-q { display: inline-flex; align-items: center; gap: var(--space-1); }
.h-q .tf-ic { width: 16px; height: 16px; }
.ds-name { font-weight: 500; overflow-wrap: anywhere; }
.side-note { margin: var(--space-2) 0 0 var(--space-2); color: var(--text-muted); font-size: 13px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

.search { width: 280px; }
.count { margin-left: var(--space-2); }
.list-scroll { flex: 1; min-height: 0; overflow: auto; }
.list-scroll thead { position: sticky; top: 0; z-index: 1; }
.list-scroll tr[data-row] { cursor: pointer; }
.list-scroll tr[data-row]:hover td { background: var(--bg-card); }
.list-scroll tr.view:hover td { background: var(--view-bg); }
.list-scroll td, .list-scroll th { white-space: nowrap; }
.list-scroll tr.grp th { height: 22px; border-bottom: 0; color: var(--text-muted); }
#measure { position: fixed; left: -9999px; top: 0; visibility: hidden; }
.list-scroll td.td-cell { padding: 0 6px; }
.edit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; min-height: 26px; }
.edit-row small { display: block; color: var(--text-muted); font: 400 13px/18px var(--font-mono); overflow-wrap: anywhere; }
.side-gap { margin-top: var(--space-2); }
.st-data { width: auto; min-width: 0; max-width: 92px; flex: 0 1 auto; }
.studio-bar .tf-btn { padding: 0 6px; }
.studio-bar { gap: 2px; min-width: 0; white-space: nowrap; flex-wrap: wrap; height: auto; min-height: var(--h-toolbar); }
.st-pv { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.studio-bar .pv-zoom { min-width: 64px; padding: 0 var(--space-1); }
.studio-bar .tf-sep { margin: 0 2px; }
.side .tf-sel, .tf-dialog > .tf-field > .tf-sel { padding-left: var(--space-1); } /* der Browser rückt den Text in Auswahllisten selbst ein */
.st-stage > .sheet-frame { flex: none; margin: 0 auto; } /* nie stauchen; mit margin bleibt ein breites Blatt auch links erreichbar */
.st-stage { flex: 1; min-height: 0; overflow: auto; background: var(--bg-canvas); display: flex; align-items: flex-start; padding: var(--space-5); box-sizing: border-box; }
.tpl-pick { display: flex; gap: var(--space-1); }
.tpl-pick .tf-btn { margin-top: 0; }
.tree-page, .tree-var { border: 0; font: 400 14px/20px var(--font-sans); }
.tree-page { padding-left: var(--space-1); gap: var(--space-1); }
.tree-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-var { padding-left: var(--space-1); }
[data-sortlist="variants"] { margin-left: var(--space-5); }
.tree-add.tree-var { width: calc(100% - var(--space-5)); margin-left: var(--space-5); padding-left: calc(var(--space-1) + 16px + var(--space-2)); } /* steht auf der Linie der Variantennummern */
.tree-sub { padding: 0 var(--space-2) var(--space-1) 46px; color: var(--text-muted); font-size: 13px; }
.fold { width: 22px; height: 22px; flex: none; }
.fold-gap { width: 22px; flex: none; }
.grip { width: 16px; flex: none; color: var(--text-muted); visibility: hidden; cursor: grab; display: inline-flex; }
.tree-var:hover .grip, .tree-page:hover .grip { visibility: visible; }
.cond-list { display: flex; flex-direction: column; gap: var(--space-1); }
.cond-x { grid-template-columns: minmax(0, 1fr) 96px auto; }
.chip-in { flex: 1 1 100px; width: auto; min-width: 90px; }
.cond-msg { color: var(--warn); font-size: 13px; }
.cov { display: flex; justify-content: space-between; gap: var(--space-2); min-height: 24px; }
.tf-menu button.hot { background: var(--bg-hover); }
#sug { position: fixed; z-index: 65; }
.st-hint { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); background: var(--bg-panel); border-bottom: 1px solid var(--line-strong); }
.pdf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); max-height: 50vh; overflow: auto; }
.pdf-pg { border: 2px solid transparent; border-radius: var(--radius-m); background: var(--bg-panel); color: var(--text-body); padding: var(--space-1); font: 400 13px/18px var(--font-sans); cursor: pointer; }
.pdf-pg[aria-pressed=true] { border-color: var(--accent); }
.pdf-th { display: block; min-height: 90px; }
.pdf-th img { width: 100%; display: block; }
#textedit, #cellinput { position: fixed; z-index: 35; box-sizing: border-box; border: 0; outline: 2px solid var(--paper-select); background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; }
#textedit { line-height: 1.15; padding: 0; resize: none; overflow: hidden; }
#badge { position: fixed; z-index: 50; pointer-events: none; }
.alt-list { display: flex; flex-direction: column; gap: var(--space-1); }
.alt-right { margin-left: auto; color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.alt-on { color: var(--accent); }
.alt-card .tf-card-h { cursor: pointer; }
.alt-card .n { width: auto; color: var(--text-muted); }
.alt-when { margin: var(--space-1) 0 0; }
#cellinput { padding: 0 2px; }
.fills { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.fill { width: 26px; height: 26px; border: 1px solid var(--line-soft); border-radius: var(--radius-s); cursor: pointer; padding: 0; }
.fill.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.dlg-h { display: flex; align-items: center; justify-content: space-between; }
.tf-dialog { max-height: calc(100vh - 48px); overflow-y: auto; box-sizing: border-box; }
.tf-dialog .tf-actions { position: sticky; bottom: calc(-1 * var(--space-5)); margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); padding: var(--space-3) var(--space-5); background: inherit; } /* Bestätigen bleibt sichtbar, auch in niedrigen Fenstern */
.help-img { display: block; width: 100%; border-radius: var(--radius-l); margin-bottom: var(--space-3); }
.tools-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.side > .tools-row, .side > .lbl, .side .btn-row { margin-left: 0; }
.rot { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); }
.rot .tf-sel { width: 76px; }
.side .tf-seg { align-self: stretch; width: fit-content; }
.side .tf-seg.full { width: auto; }
.lbl { font: 500 13px/18px var(--font-sans); color: var(--text-muted); padding-left: var(--space-2); }
.livebox { background: var(--bg-app); border-radius: var(--radius-m); padding: 6px var(--space-2); color: var(--text-muted); overflow-wrap: anywhere; }
.livebox b { color: var(--text); font-weight: 500; }
.insp-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); }
.insp-foot .side-note, .insp-span { grid-column: 1 / -1; }
.insp-foot .side-note { margin: 0; }
.side .tf-btn.danger { justify-content: center; }
.btn-row { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.btn-row .tf-btn { margin-top: 0; }
.bg-card { display: flex; gap: var(--space-2); align-items: center; background: var(--bg-card); border-radius: var(--radius-l); padding: var(--space-1) var(--space-2); }
.bg-pv { width: 36px; height: 50px; flex: none; background: var(--paper); border-radius: var(--radius-s); overflow: hidden; }
.bg-pv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-nm { min-width: 0; }
.bg-nm b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.bg-nm small { color: var(--text-muted); font-size: 13px; }
.t-scope { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--space-2); padding: var(--space-2) var(--space-3) var(--space-2) 20px; background: var(--select-bg); color: var(--select-text); }
.t-hint { color: var(--tip-text); font-size: 13px; }
.t-hint .kbd { font: 400 12px/16px var(--font-mono); background: var(--tip-kbd-bg); border-radius: var(--radius-s); padding: 0 4px; }
.switch-row small { display: block; color: var(--text-muted); font-size: 13px; }
.fill-custom { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); background: var(--bg-control); overflow: hidden; box-sizing: border-box; }
.fill-custom .tf-ic { width: 16px; height: 16px; }
.fill-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.fill-none { background: var(--paper); position: relative; }
.fill-none::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; border-top: 1.5px solid var(--danger); transform: rotate(-45deg); }
.lw { display: inline-block; width: 16px; background: currentColor; border-radius: 1px; }
.ls { display: inline-block; width: 26px; border-top: 2px solid currentColor; }
#marquee { position: fixed; z-index: 30; pointer-events: none; border: 1px solid var(--accent); background: rgba(200, 240, 74, .1); }
.layer-group > .tf-row .fold { margin-left: -4px; }
.layer-kids { margin-left: var(--space-5); }
.bp-grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bp-grid.eight { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.center-empty { flex: 1; justify-content: center; }

.row-title { font: 600 17px/24px var(--font-sans); overflow-wrap: anywhere; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
.facts dt { color: var(--text-muted); font-size: 13px; }
.facts dd { margin: 0; font: 500 14px/20px var(--font-mono); overflow-wrap: anywhere; }

#tip, #helptip, #menu { position: fixed; z-index: 40; }
#tip { pointer-events: none; }
#toast { position: fixed; left: 50%; bottom: calc(var(--h-outbar) + var(--space-3)); transform: translateX(-50%); z-index: 70; }
.menu-scroll { max-height: min(460px, calc(100vh - 80px)); overflow-y: auto; }

#manual { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--bg-app); }
#manual[hidden] { display: none; }
.manual-title { font: 600 17px/24px var(--font-sans); padding-left: var(--space-1); }
.manual-bar { gap: var(--space-2); }
.manual-body { flex: 1; min-height: 0; }
.tf-manual nav { overflow-y: auto; }
.tf-manual nav .tf-h { margin: var(--space-2) 0 0; }
.manual-scroll { overflow-y: auto; min-height: 0; }
.tf-manual ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.tf-manual section { scroll-margin-top: var(--space-3); }
.tf-manual section.target h2 { color: var(--accent); }

#outbar { flex: none; }
.th-check, .td-check { width: 16px; }
.td-st { width: 14px; }
.list-scroll td.td-check, .list-scroll th.th-check { padding-right: 0; }
.pg { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 30px; }
.pg-info { color: var(--text-muted); text-align: right; }
.pg-gap { margin-top: -4px; }
.thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); justify-items: center; }
.thumb { border: 0; padding: 0; background: none; cursor: pointer; }
.sheet-frame { position: relative; overflow: hidden; background: var(--paper); }
.sheet-frame > .sheet { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

#preview { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--bg-canvas); }
.pv-bar { gap: var(--space-2); }
.pv-title { font: 600 17px/24px var(--font-sans); }
.pv-body { flex: 1; min-height: 0; display: flex; }
.pv-nav { width: var(--w-left); flex: none; background: var(--bg-panel); border-right: 1px solid var(--line-strong); overflow-y: auto; padding: var(--space-2); }
.pv-stage > * { flex: none; margin-left: auto; margin-right: auto; }
.pv-stage { flex: 1; min-width: 0; overflow: auto; padding: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-5); align-content: flex-start; }
.pv-page { display: flex; flex-direction: column; gap: var(--space-1); }
.pv-tag { color: var(--text-muted); font-size: 13px; }
.pv-none { box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: var(--bg-panel); color: var(--text-body); text-align: center; padding: var(--space-4); }
.pv-zoom { min-width: 76px; }
/* Zeiger (D116): Pfeil auf dem Blatt, Verschieben erst beim Ziehen, Hand zum Verschieben des Blatts */
body.is-moving, body.is-moving * { cursor: move !important; }
body.can-pan #st-stage, body.can-pan #st-stage *, #pv-stage, #pv-stage * { cursor: grab !important; }
body.is-panning, body.is-panning *, body.is-panning #st-stage *, body.is-panning #pv-stage * { cursor: grabbing !important; }

body.print-sheets #print-root { display: block; }
#print-root { display: none; }
@media print {
  html, body { height: auto; overflow: visible; background: var(--paper); }
  #shell, #tip, #helptip, #menu, #toast, #preview { display: none !important; }
  body.print-sheets #manual { display: none !important; }
  .manual-bar, .tf-manual nav, .tf-manual aside { display: none !important; }
  #manual { position: static; display: block; background: var(--paper); }
  .tf-manual { display: block; background: var(--paper); min-height: 0; }
  .manual-scroll { overflow: visible; }
  .tf-manual article { max-width: none; padding: 0; color: var(--ink); }
  .tf-manual h1, .tf-manual h2, .tf-manual p, .tf-manual li { color: var(--ink); }
  .tf-manual .kbd { background: none; color: var(--ink); padding: 0; }
}
@media (max-width: 1500px) { .list-scroll .tf-table th { padding: 0 6px; } .list-scroll .tf-table td { padding: 0 2px; } }