:root{
  --accent:#e4000f; --accent-d:#b8000c; --ink:#1d2329; --muted:#6b7580; --line:#d5dae0; --bg:#f3f5f7; --panel:#ffffff; --sel:#1a73e8; --ok:#1a7f37; --warn:#b45309;
  --radius:6px; font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);font-size:13px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
#app{display:grid;grid-template-rows:48px auto 1fr;height:100vh}
#top{display:flex;align-items:center;gap:6px;padding:0 12px;background:#fff;border-bottom:1px solid var(--line)}
#top .brand{font-weight:700;letter-spacing:.2px;margin-right:8px;display:flex;align-items:center;gap:8px}
#top .brand i{display:inline-block;width:10px;height:22px;background:var(--accent);border-radius:2px}
#top .sep{width:1px;height:24px;background:var(--line);margin:0 6px}
#top .grow{flex:1}
.btn{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:6px 10px;line-height:1.2}
.btn:hover{background:#f0f2f5}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--accent-d)}
.btn.small{padding:3px 7px;font-size:12px}
.btn.danger{color:#b00020}
.btn.icon{padding:5px 8px}
#tplname{font-weight:600;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#status{color:var(--muted);font-size:12px;min-width:150px}
#status.dirty{color:var(--warn)}
#main{display:grid;grid-template-columns:270px 1fr 340px;min-height:0}
#outline,#panel{background:var(--panel);overflow:auto;min-height:0}
#outline{border-right:1px solid var(--line)}
#panel{border-left:1px solid var(--line)}
#preview{overflow:auto;position:relative;background:#dfe3e8;min-height:0}
.pages{padding:18px 0 80px;display:flex;flex-direction:column;align-items:center;gap:18px;min-width:min-content}
.page{position:relative;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);flex:none;overflow:hidden}
.pgno{position:absolute;right:6px;bottom:4px;font-size:10px;color:#aaa}
/* Preview-Elemente */
.page > div,.page > img{position:absolute}
.op-rect{pointer-events:auto}
.op-t{display:flex;overflow:hidden;white-space:pre-wrap;line-height:1.12;font-family:Arial,Helvetica,sans-serif;pointer-events:auto}
.op-f{font-family:Arial,Helvetica,sans-serif;display:flex;align-items:center;overflow:hidden;pointer-events:auto}
.op-f.na{background:#c8c8c8}
.op-f.calc{color:#8a8a8a;font-style:italic;justify-content:center}
.op-f.photo,.op-f.signature{border:1px dashed #999;color:#999;justify-content:center;background:#fafafa}
.op-f.checkbox{justify-content:center}
.op-f.dropdown:after{content:"▾";position:absolute;right:3px;color:#888;font-size:.8em}
.op-f.textarea{align-items:flex-start;white-space:pre-wrap}
.op-img{object-fit:contain;pointer-events:auto}
[data-ref].hov{outline:1.5px solid rgba(26,115,232,.55);outline-offset:-1px}
[data-ref].sel{outline:2px solid var(--sel);outline-offset:-1px;box-shadow:0 0 0 3px rgba(26,115,232,.18)}
.op-rect.sel{background-image:linear-gradient(rgba(26,115,232,.07),rgba(26,115,232,.07))}
/* Gliederung */
.ol-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600;position:sticky;top:0;background:#fff;z-index:2}
.ol-sec{border-bottom:1px solid #eef0f3}
.ol-sec-h{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer}
.ol-sec-h:hover,.ol-blk:hover{background:#f4f6f8}
.ol-sec-h.sel,.ol-blk.sel{background:#e8f0fe}
.ol-no{background:var(--accent);color:#fff;border-radius:3px;font-weight:700;font-size:11px;padding:1px 5px}
.ol-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-blk{padding:5px 10px 5px 36px;color:#37424d;cursor:pointer;display:flex;gap:6px;font-size:12px}
.ol-blk .ty{color:var(--muted);min-width:62px}
.ol-blk .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-add{padding:4px 10px 8px 36px}
.ol-issues{margin:8px;border:1px solid #f5c2c7;background:#fff5f5;border-radius:var(--radius);padding:6px 8px;color:#842029;font-size:12px}
.ol-issues div{padding:2px 0;cursor:pointer}
/* Eigenschaften */
.pn{padding:12px 14px 40px}
.pn h3{margin:0 0 4px;font-size:14px}
.pn .crumb{color:var(--muted);font-size:12px;margin-bottom:10px}
.pn h4{margin:16px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.fr{display:grid;grid-template-columns:104px 1fr;gap:8px;align-items:start;margin:6px 0}
.fr > label{color:#47525d;padding-top:5px;font-size:12px}
.fr input[type=text],.fr input[type=number],.fr select,.fr textarea{width:100%;border:1px solid var(--line);border-radius:5px;padding:5px 7px;background:#fff}
.fr input:focus,.fr select:focus,.fr textarea:focus{outline:2px solid rgba(26,115,232,.35);border-color:var(--sel)}
.fr textarea{min-height:64px;resize:vertical}
.fr .hint{grid-column:2;color:var(--muted);font-size:11.5px;margin-top:-3px}
.fr input[type=color]{width:46px;height:28px;padding:0;border:1px solid var(--line);border-radius:5px;background:#fff}
.chk{display:flex;align-items:center;gap:6px;padding-top:4px}
.btnrow{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.imgfield{display:flex;gap:8px;align-items:center}
.imgfield img{width:54px;height:40px;object-fit:contain;border:1px solid var(--line);background:#fafafa;border-radius:4px}
.empty{color:var(--muted);padding:16px}
/* Dialoge */
.modal-bg{position:fixed;inset:0;background:rgba(15,20,25,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{background:#fff;border-radius:10px;min-width:420px;max-width:min(720px,94vw);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal h2{margin:0;padding:14px 18px;font-size:16px;border-bottom:1px solid var(--line)}
.modal .body{padding:14px 18px;overflow:auto}
.modal .foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.list-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid #eef0f3}
.list-row .nm{flex:1;font-weight:600}
.list-row .dt{color:var(--muted);font-size:12px}
.menu{position:fixed;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.2);z-index:60;min-width:230px;padding:4px}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 10px;border-radius:5px}
.menu button:hover{background:#f0f2f5}
.menu small{display:block;color:var(--muted)}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#1d2329;color:#fff;padding:9px 16px;border-radius:8px;z-index:80;opacity:0;transition:opacity .2s;pointer-events:none;max-width:70vw}
#toast.show{opacity:1}
#toast.err{background:#b00020}
.auth{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:100}
.auth form{background:#fff;padding:26px 28px;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.15);width:360px}
.auth h1{margin:0 0 4px;font-size:20px}
.auth p{color:var(--muted);margin:0 0 16px}
.auth input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:6px;margin-bottom:10px}
.auth .err{color:#b00020;min-height:18px;margin-bottom:6px}

/* PDF-Import */
.imp { min-width: 460px; max-width: 560px; }
.imp .row { display: flex; gap: 8px; align-items: flex-start; margin: 7px 0; font-size: 13px; line-height: 1.35; }
.imp .row input[type=checkbox] { margin-top: 2px; }
.imp .row small { display: block; color: #777; }
.imp .nm { width: 100%; margin: 4px 0 8px; }
.imp .sum { background: #f3f3f3; border-left: 3px solid #e4000f; padding: 8px 10px; margin: 12px 0 6px; font-size: 13px; }
.imp .warn { color: #8a5a00; font-size: 12px; margin: 5px 0; line-height: 1.35; }
.imp .secs { max-height: 150px; overflow: auto; font-size: 12px; color: #444; border: 1px solid #e3e3e3; padding: 4px 8px; margin-top: 6px; }
.imp .secs div { padding: 1px 0; }

/* Benutzerverwaltung */
#who{font-size:12px;color:#444;margin:0 6px;white-space:nowrap}
#who em{font-style:normal;background:#eef0f3;border-radius:9px;padding:1px 7px;margin-left:6px;font-size:11px;color:#555}
.modal.wide{min-width:min(900px,96vw);max-width:min(980px,96vw)}
.um .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:-4px 0 12px}
.um .tabs button{border:0;background:none;padding:8px 14px;cursor:pointer;border-bottom:2px solid transparent;color:#555}
.um .tabs button.on{border-bottom-color:var(--accent);color:#000;font-weight:600}
.um table{width:100%;border-collapse:collapse;font-size:13px}
.um th{text-align:left;font-weight:600;color:#666;font-size:12px;padding:4px 6px;border-bottom:1px solid var(--line)}
.um td{padding:5px 6px;border-bottom:1px solid #eef0f3;vertical-align:middle}
.um tr.off td{color:#999}
.um select,.um input[type=text],.um input[type=password],.um input[type=number]{border:1px solid var(--line);border-radius:5px;padding:4px 6px;background:#fff;font-size:13px}
.um .bar{display:flex;gap:8px;align-items:center;margin:0 0 12px;flex-wrap:wrap}
.um .bar input[type=text]{flex:1;min-width:200px}
.um .hits{border:1px solid var(--line);border-radius:6px;margin:0 0 12px;max-height:190px;overflow:auto}
.um .hits .list-row{padding:6px 10px}
.um .grid{display:grid;grid-template-columns:190px 1fr;gap:8px 12px;align-items:center;font-size:13px}
.um .grid label{color:#555}
.um .grid input[type=text],.um .grid input[type=password],.um .grid input[type=number],.um .grid select{width:100%}
.um .grid small{grid-column:2;color:#888;margin-top:-4px}
.um .steps div{padding:3px 0;font-size:13px}
.um .steps .bad{color:#b00020}.um .steps .good{color:#1a7f37}
.um .note{background:#fff7e0;border-left:3px solid #e0a800;padding:7px 10px;font-size:12px;margin:0 0 12px}
.um .muted{color:#888;font-size:12px}
.um .sub{font-weight:600;margin:16px 0 6px;border-top:1px solid #eef0f3;padding-top:12px}

/* Raster: Breiten-Griff, Rasterlinien, Ablagemarke */
.page .rz{position:absolute;width:8px;cursor:col-resize;background:rgba(26,115,232,.55);border-radius:2px;z-index:5;touch-action:none}
.page .rz:hover{background:rgba(26,115,232,.9)}
.page .rz-guide{position:absolute;width:0;border-left:1px solid rgba(26,115,232,.22);pointer-events:none;z-index:4}
.page .rz-guide.major{border-left-color:rgba(26,115,232,.55)}
.page .rz-tip{position:absolute;transform:translateX(-100%);background:#1d2329;color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;pointer-events:none;z-index:7;white-space:nowrap}
.page .dropmark{position:absolute;background:#1a73e8;border-radius:2px;pointer-events:none;z-index:6}
body.fb-dragging{user-select:none;-webkit-user-select:none}
body.fb-moving #preview{cursor:grabbing}
#pages .op-f.sel,#pages .op-t.sel{cursor:grab}

/* Hilfe und Update */
.tipbtn{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:6px;border-radius:50%;background:#e4e8ee;color:#555;font-size:10px;font-weight:700;cursor:pointer;vertical-align:1px;user-select:none}
.tipbtn:hover,.tipbtn:focus{background:var(--sel,#1a73e8);color:#fff;outline:none}
.tipbox{position:fixed;z-index:120;max-width:300px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.22);padding:10px 12px;font-size:12.5px;line-height:1.45}
.tipbox b{display:block;margin-bottom:3px}
.tipbox a{display:block;margin-top:7px;font-size:12px;color:var(--sel,#1a73e8)}
.hl{display:grid;grid-template-columns:230px 1fr;gap:16px;height:min(560px,70vh)}
.hl-side{display:flex;flex-direction:column;gap:8px;min-height:0}
.hl-side input{border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:13px}
.hl-nav{overflow:auto;display:flex;flex-direction:column;gap:2px}
.hl-nav button{text-align:left;border:0;background:none;padding:7px 9px;border-radius:6px;cursor:pointer;font-size:13px}
.hl-nav button:hover{background:#f0f2f5}.hl-nav button.on{background:#e8f0fe;font-weight:600}
.hl-main{overflow:auto;padding-right:6px;font-size:13.5px;line-height:1.55}
.hl-main h3{margin:0 0 10px}.hl-main li{margin:4px 0}
.hl-main code{background:#f0f2f5;padding:1px 5px;border-radius:4px;font-size:12.5px}
.hl-main kbd{border:1px solid #c9ced6;border-bottom-width:2px;border-radius:4px;padding:0 5px;background:#fafbfc;font-size:12px}
.hl-main table.kbd td{padding:5px 14px 5px 0;vertical-align:top}
.hl-main dt{font-weight:600;margin-top:10px}.hl-main dd{margin:2px 0 0}
.up .dz{border:2px dashed #b9c0cb;border-radius:8px;padding:22px;text-align:center;color:#666;cursor:pointer}
.up .dz.over{border-color:var(--sel,#1a73e8);background:#f2f7ff}
.up .files{white-space:pre-wrap;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;background:#f6f7f9;border-radius:6px;padding:8px 10px;margin:6px 0;max-height:180px;overflow:auto}
.up details{margin:6px 0}
@media (max-width:760px){.hl{grid-template-columns:1fr;height:auto}.hl-nav{flex-direction:row;flex-wrap:wrap}}
.wmm{display:flex;align-items:center;gap:6px}.wmm input{width:84px}.wmm .unit{color:var(--muted);font-size:12px}
/* Feldfunktionen */
.fnbox{display:flex;flex-direction:column;gap:6px}
.fnbar{display:flex;gap:6px;flex-wrap:wrap}
.fnbar select,.fnins{max-width:48%}
.fnmsg{font-size:12px}.fnmsg.good{color:#2a7a2a}.fnmsg.bad{color:#b00020}
.fnrule{border:1px solid var(--line);border-radius:6px;padding:8px;margin-bottom:8px;display:flex;flex-direction:column;gap:6px;background:#fafafa}
.fnrow{display:flex;gap:8px;align-items:center}.fnrow>label{flex:0 0 110px;font-size:12px;color:#555}.fnrow>select,.fnrow>input{flex:1;min-width:0}
.fnto{display:flex;flex-direction:column;gap:4px;flex:1}
.fnas .fnres{font-weight:600;margin-top:8px}.fnas .fnpicks{max-height:200px;overflow:auto;margin:6px 0}
.fnact .fnrow{flex-direction:column;align-items:stretch;gap:2px}.fnact .fnrow>label{flex:none}
/* Mehrsprachigkeit */
#langbar{display:flex;align-items:center;gap:6px}#langbar .lbl{font-size:12px;color:#666}#langbar select{max-width:150px}
.btn.small.warn{background:#fff3e0;border-color:#f59e0b;color:#a35c00}
#pages .op-t.miss{outline:1.5px dashed #f59e0b;background:rgba(245,158,11,.22)}
#pages .op-t.auto{outline:1px dashed #3b82f6;background:rgba(59,130,246,.12)}
.itools{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}.itools input[type=text]{flex:1;min-width:140px}
.ihead,.irow{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ihead{font-weight:600;font-size:12px;color:#555;border-bottom:1px solid var(--line);padding:4px 0}
.ilist{max-height:55vh;overflow:auto}.irow{padding:5px 0;border-bottom:1px solid #eee;align-items:start}
.isrc{font-size:13px;white-space:pre-wrap;word-break:break-word;padding-top:4px}
.itr textarea{width:100%;box-sizing:border-box;resize:vertical;font:inherit}.itr textarea.miss{background:#fff8ec;border-color:#f59e0b}
.imeta{display:flex;gap:6px;align-items:center;margin-top:2px}.itag{font-size:11px;padding:1px 6px;border-radius:9px}
.itag.miss{background:#fde8c8;color:#a35c00}.itag.auto{background:#dbeafe;color:#1d4ed8}.itag.ok{background:#e3f4e3;color:#2a7a2a}
.ipanel{border:1px solid var(--line);border-radius:6px;padding:8px;margin:10px 0;background:#fafafa}.ipanel h4{margin:0 0 4px}
.ipanel .irow{grid-template-columns:1fr}
.ilangrow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #eee}.ilangrow .grow{flex:1}
#langbar .btn{white-space:nowrap}
.fnjs{border:1px solid var(--line);border-radius:6px;padding:4px 8px;margin:4px 0}.fnjs summary{cursor:pointer;font-size:12px}.fnjs textarea{width:100%;box-sizing:border-box;font:11px/1.3 monospace}.small{font-size:11px}

#tabs{display:flex;align-items:flex-end;gap:2px;padding:4px 12px 0;background:#eceef1;border-bottom:1px solid var(--line);overflow-x:auto}
#tabs .tab{display:flex;align-items:center;gap:6px;max-width:230px;padding:5px 6px 5px 12px;background:#dfe2e7;border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;cursor:pointer;font-size:13px;white-space:nowrap}
#tabs .tab.on{background:#fff;font-weight:600;margin-bottom:-1px;padding-bottom:6px}
#tabs .tab .tn{overflow:hidden;text-overflow:ellipsis}
#tabs .tab .tx,#tabs .tab-add{border:0;background:none;cursor:pointer;font-size:16px;line-height:1;padding:2px 5px;border-radius:4px;color:#555}
#tabs .tab .tx:hover,#tabs .tab-add:hover{background:rgba(0,0,0,.12)}