:root{
  --bg:#f3f5f8;--panel:#fff;--text:#162033;--muted:#687386;--line:#dce1e8;
  --accent:#335cff;--accent2:#e8edff;--danger:#b42318;--ok:#138a54;--warning:#b7791f;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}button{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:10px;padding:.7rem .9rem;cursor:pointer}
button:hover{border-color:#aeb8c8}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}button.danger{background:var(--danger);color:#fff;border-color:var(--danger)}button.link{border:0;background:transparent;padding:.3rem 0;color:var(--accent)}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:.72rem;background:#fff;color:var(--text)}textarea{resize:vertical}label{display:grid;gap:.35rem;font-size:.92rem;font-weight:650}label.check{display:flex;align-items:center;gap:.6rem}label.check input{width:auto}.hidden{display:none!important}.muted{color:var(--muted);margin:.2rem 0}.danger-text{color:var(--danger)!important}small{color:var(--muted);line-height:1.45}
.topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;gap:1rem}.brand,.top-actions,.toolbar,.toolbar-actions,.filters,.inline,.section-heading,.dialog-title,.viewer-toolbar{display:flex;align-items:center}.brand{gap:.7rem}.brand>div{display:grid}.brand small{color:var(--muted)}
.brand-mark{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--text);color:#fff;font-weight:850;letter-spacing:-.08em}.brand-mark.small{width:42px;height:42px;border-radius:12px}.top-actions{gap:.5rem;flex-wrap:wrap;justify-content:flex-end}.status-chip{font-size:.82rem;padding:.35rem .55rem;border-radius:999px;background:#fff7d6;color:#775d00;border:1px solid #f0d96b}.status-chip.ok{background:#dcfce8;color:#166534;border-color:#86efac}.status-chip.neutral{background:#f2f4f7;color:#475467;border-color:#d0d5dd}
main{max-width:1500px;margin:auto;padding:1.25rem}.toolbar{justify-content:space-between;gap:1rem;margin-bottom:1rem}.toolbar h1{margin:.2rem 0}.toolbar-actions{gap:.55rem;flex-wrap:wrap}.filters{gap:.65rem;margin-bottom:1rem}.filters input{flex:2}.filters select{max-width:220px}.view-switch{display:flex}.view-switch button{border-radius:0}.view-switch button:first-child{border-radius:10px 0 0 10px}.view-switch button:last-child{border-radius:0 10px 10px 0}.active-view{background:var(--accent2)!important;border-color:var(--accent)!important}
.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:collapse;min-width:980px}th,td{text-align:left;padding:.8rem;border-bottom:1px solid var(--line);vertical-align:middle}th{font-size:.85rem;color:var(--muted);cursor:pointer;background:#fafbfc;position:sticky;top:0}th.sort-active{color:var(--accent)}tr:last-child td{border-bottom:0}.tag{display:inline-block;background:var(--accent2);color:#2543b8;border-radius:999px;padding:.2rem .5rem;margin:.12rem;font-size:.78rem}.badge{display:inline-block;border-radius:999px;padding:.25rem .55rem;font-size:.78rem}.badge.ok{background:#dcfce8;color:#166534}.badge.expired{background:#fee2e2;color:#991b1b}.badge.local{background:#f2f4f7;color:#475467}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.doc-card,.template-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem}.doc-card h3,.template-card h3{margin:.2rem 0}.card-actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1rem}.empty{padding:4rem;text-align:center;background:#fff;border:1px dashed var(--line);border-radius:14px}
.editor-grid{display:grid;grid-template-columns:340px 1fr;gap:1rem}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem;display:grid;gap:1rem}.panel h2,.panel h3{margin:0}.sidebar-panel{align-self:start;position:sticky;top:78px}.content-column{min-width:0}.inline{gap:.4rem}.inline select{flex:1}.inline button{width:44px}.section-heading{justify-content:space-between;gap:1rem}.section-heading>div:last-child{display:flex;gap:.5rem;flex-wrap:wrap}.blocks-list{display:grid;gap:.8rem}.block{border:1px solid var(--line);border-radius:12px;padding:.8rem;background:#fafbfc;display:grid;grid-template-columns:34px 1fr 40px;gap:.7rem;align-items:start}.drag{cursor:grab;padding:.5rem 0;text-align:center;color:var(--muted);touch-action:none}.block-fields{display:grid;gap:.55rem}.block img{max-width:260px;max-height:180px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid var(--line)}.delete-block{color:var(--danger);padding:.5rem}.sortable-ghost{opacity:.35}.qr-preview{min-height:225px;display:grid;place-items:center;border:1px dashed var(--line);border-radius:12px;background:#fff;overflow:hidden}.quality{display:flex;align-items:center;gap:.5rem;font-size:.85rem}.quality span:first-child{width:10px;height:10px;border-radius:50%;background:#9ca3af}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:1rem}.auth-card{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:2rem;display:grid;gap:1rem}.auth-card .brand-mark{margin:auto}.auth-card h1,.auth-card p{text-align:center;margin:0}
dialog{border:0;border-radius:16px;padding:0;box-shadow:0 20px 70px #0004;max-width:600px;width:calc(100% - 2rem);max-height:92vh}dialog::backdrop{background:#11182788}.dialog-content{padding:1.2rem;display:grid;gap:1rem;overflow:auto;max-height:92vh}.dialog-actions{display:flex;justify-content:flex-end;gap:.6rem}.dropbox-box{display:grid;gap:.6rem;padding:1rem;background:#f7f8fa;border-radius:12px}.wide-dialog{max-width:1100px;height:90vh}.wide-dialog .dialog-content{height:100%;grid-template-rows:auto 1fr}.wide-dialog iframe{width:100%;height:100%;border:1px solid var(--line);border-radius:10px}.preview-title{justify-content:space-between;gap:2rem;padding-bottom:.35rem}.preview-title h2{margin:0}.db-summary{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.db-summary>div{display:grid;gap:.2rem;padding:.75rem;background:#f7f8fa;border-radius:10px}.db-summary span{color:var(--muted);font-size:.8rem}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.toast{position:fixed;z-index:100;right:1rem;bottom:1rem;background:#162033;color:#fff;padding:.8rem 1rem;border-radius:10px;opacity:0;transform:translateY(20px);pointer-events:none;transition:.2s;max-width:min(480px,calc(100vw - 2rem))}.toast.show{opacity:1;transform:none}
.reader-body{background:#162033}.reader-shell{padding:0;max-width:none;height:100vh}.reader-status,.reader-message{min-height:100vh;display:grid;place-content:center;text-align:center;color:#fff;padding:2rem}.reader-message{font-size:1.25rem;white-space:pre-wrap}.spinner{width:44px;height:44px;border:4px solid #ffffff44;border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{to{transform:rotate(360deg)}}.viewer{height:100vh;background:#e5e7eb;overflow:auto}.viewer-toolbar{height:58px;background:#fff;padding:.5rem 1rem;justify-content:space-between;position:sticky;top:0;z-index:2}.viewer-toolbar>div{display:flex;align-items:center;gap:.35rem}.viewer-frame-wrap{height:calc(100vh - 58px);overflow:auto}.viewer iframe{display:block;border:0;width:100%;height:100%;margin:auto;background:#fff;transform-origin:top center}
@media(max-width:900px){.editor-grid{grid-template-columns:1fr}.sidebar-panel{position:static}.topbar,.toolbar{align-items:flex-start}.topbar{position:static}.top-actions{justify-content:flex-end}.filters{display:grid;grid-template-columns:1fr 1fr}.filters input{grid-column:1/-1}.filters select{max-width:none}.table-wrap{font-size:.9rem}main{padding:.8rem}.section-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:580px){.topbar{display:grid;gap:.7rem}.top-actions{justify-content:flex-start}.toolbar{display:grid}.toolbar-actions{width:100%}.toolbar-actions button{flex:1}.filters{grid-template-columns:1fr}.filters input{grid-column:auto}.block{grid-template-columns:28px 1fr 36px}.viewer-toolbar strong{display:none}.db-summary,.button-grid{grid-template-columns:1fr}.dialog-actions{flex-wrap:wrap}.dialog-actions button{flex:1}}
@media print{body{background:#fff}.topbar,.toolbar,.filters,dialog,.toast{display:none!important}.panel,.table-wrap{border:0}}
.pdf-viewer{height:100vh;height:100svh;background:#dfe3e8;overflow:hidden;display:flex;flex-direction:column}.pdf-viewer .viewer-toolbar{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;gap:.75rem;height:auto;min-height:58px}.viewer-search{display:flex;align-items:center;gap:.35rem;min-width:0}.viewer-search input{min-width:120px}.viewer-search span{font-size:.8rem;color:var(--muted);white-space:nowrap}.viewer-actions{display:flex;align-items:center;gap:.35rem;white-space:nowrap}.pdf-layout{height:auto;min-height:0;flex:1;display:grid;grid-template-columns:170px 1fr}.pdf-layout.thumbs-hidden{grid-template-columns:1fr}.thumbnail-pane{overflow:auto;background:#1f2937;padding:.75rem;display:grid;align-content:start;gap:.75rem}.thumbnail-button{display:grid;gap:.35rem;justify-items:center;padding:.5rem;background:#ffffff12;border-color:#ffffff2b;color:#fff}.thumbnail-button.active{outline:2px solid #8aa0ff}.thumbnail-button canvas{max-width:100%;height:auto;background:#fff}.thumbnail-button span{font-size:.75rem}.page-pane{overflow:auto;padding:1rem;display:grid;justify-items:center;align-content:start;gap:1rem}.pdf-page{background:#fff;box-shadow:0 4px 20px #0003;max-width:100%}.pdf-page canvas{display:block;max-width:100%;height:auto!important}.mobile-only,.mobile-label{display:none}
@media(max-width:820px){.pdf-viewer .viewer-toolbar{grid-template-columns:1fr;gap:.4rem;padding:.45rem}.pdf-viewer .viewer-toolbar>strong{display:none}.viewer-search,.viewer-actions{width:100%}.viewer-search input{flex:1}.viewer-actions{justify-content:flex-start;overflow-x:auto}.pdf-layout{grid-template-columns:120px 1fr}.pdf-layout.thumbs-hidden{grid-template-columns:1fr}.thumbnail-pane{padding:.4rem}.page-pane{padding:.4rem}}
@media(max-width:560px){.pdf-viewer .viewer-toolbar{display:flex;flex-wrap:wrap;gap:.3rem;padding:.35rem}.viewer-actions{order:1;gap:.25rem}.viewer-search{order:2}.viewer-search.mobile-search-collapsed{display:none}.mobile-only,.mobile-label{display:inline}.desktop-label{display:none}.viewer-actions button{padding:.42rem .52rem;min-height:36px;font-size:.82rem}.viewer-actions #zoomLabel{min-width:44px;text-align:center;font-size:.78rem}.viewer-search input{padding:.52rem;font-size:16px}.viewer-search button{padding:.45rem .55rem}.pdf-layout{grid-template-columns:1fr}.thumbnail-pane{position:absolute;z-index:4;top:48px;bottom:0;left:0;width:126px;box-shadow:4px 0 20px #0005}.viewer-search span{display:none}.page-pane{width:100%;padding:.3rem}.pdf-page{box-shadow:0 2px 12px #0003}}


/* V0.04: kompakte Mobilansicht, stabile Dropbox-Rueckkehr und klickbare Links */
.rich-toolbar{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;padding:.45rem;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:#f5f7fa}
.rich-toolbar button,.rich-toolbar select,.rich-toolbar input{width:auto;min-width:38px;padding:.42rem .52rem;border-radius:7px}
.rich-toolbar select{max-width:150px}.rich-toolbar input[type="color"]{width:42px;height:34px;padding:.18rem}
.rich-editor{min-height:150px;border:1px solid var(--line);border-radius:0 0 10px 10px;background:#fff;padding:.75rem;line-height:1.5;overflow-wrap:anywhere}
.rich-editor:focus{outline:2px solid #335cff33;border-color:var(--accent)}
.rich-editor p,.rich-editor div{margin:.25rem 0}.rich-editor ul,.rich-editor ol{margin:.35rem 0;padding-left:1.6rem}.rich-editor a{color:#1d4ed8;text-decoration:underline;cursor:pointer}
.rich-editor.compact{min-height:92px}
.qr-preview canvas{width:min(100%,250px)!important;height:auto!important;display:block}
.settings-note{font-size:.84rem;color:var(--muted)}


/* V0.03: automatische kompakte Bedienung auf Smartphones. Formulare bleiben mit 16 px gegen unerwünschtes iOS-Fokus-Zoomen geschützt. */
@media(max-width:580px){
  body:not(.reader-body){font-size:14px;-webkit-text-size-adjust:100%}
  body:not(.reader-body) main{padding:.45rem}
  body:not(.reader-body) h1{font-size:1.28rem}
  body:not(.reader-body) h2{font-size:1.08rem}
  body:not(.reader-body) h3{font-size:1rem}
  body:not(.reader-body) input,body:not(.reader-body) select,body:not(.reader-body) textarea,body:not(.reader-body) .rich-editor{font-size:16px}
  body:not(.reader-body) button{font-size:.82rem;padding:.5rem .62rem;min-height:38px}
  body:not(.reader-body) label{font-size:.8rem;gap:.25rem}
  .topbar{padding:.5rem .55rem;gap:.45rem}
  .brand-mark.small{width:34px;height:34px;border-radius:9px}
  .brand{gap:.5rem}.brand strong{font-size:.95rem}.brand small{font-size:.7rem}
  .top-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:.35rem}
  .top-actions .status-chip{grid-column:1/-1;text-align:center;font-size:.7rem;padding:.25rem .4rem}
  .toolbar{gap:.5rem;margin-bottom:.6rem}
  .toolbar-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:.35rem}
  .toolbar-actions button{width:100%}
  .filters{gap:.4rem;margin-bottom:.6rem}
  .panel{padding:.65rem;gap:.7rem;border-radius:10px}
  .editor-grid{gap:.55rem}
  .section-heading{gap:.45rem}
  .section-heading>div:last-child{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:.35rem}
  .section-heading>div:last-child button{width:100%}
  .block{padding:.5rem;gap:.4rem;border-radius:9px}
  .block-fields{gap:.4rem}
  .rich-toolbar{gap:.22rem;padding:.3rem;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rich-toolbar button,.rich-toolbar select,.rich-toolbar input{flex:0 0 auto;min-height:34px;padding:.32rem .42rem}
  .rich-toolbar select{max-width:118px;font-size:14px}
  .rich-editor{min-height:112px;padding:.58rem;line-height:1.4}
  .rich-editor.compact{min-height:82px}
  .qr-preview{min-height:190px}
  dialog{width:calc(100% - .5rem);max-height:96svh;border-radius:10px}
  .dialog-content{padding:.7rem;gap:.7rem;max-height:96svh}
  .wide-dialog{height:96svh}
  .preview-title{gap:1.25rem}
  .preview-title button{flex:0 0 auto}
}

/* V0.05: sichtbarer Dropbox-Datenbankstatus und mobile Dateiauswahl */
.db-action-message{
  border:1px solid #b9c7e8;
  background:#eef3ff;
  color:#20345f;
  border-radius:10px;
  padding:.75rem .85rem;
  line-height:1.4
}
.db-action-message.error{
  border-color:#efb4ae;
  background:#fff0ef;
  color:#8a1c13
}
.db-action-message.ok{
  border-color:#a7d9bd;
  background:#edfbf3;
  color:#16653a
}
.db-action-message.busy{
  border-color:#d8c386;
  background:#fff9e7;
  color:#704f00
}
#databaseDialog button[disabled],#databaseDialog select[disabled],#databaseDialog input[disabled]{
  opacity:.55;
  cursor:wait
}
@media(max-width:560px){
  #databaseDialog .button-grid{grid-template-columns:1fr}
  #databaseDialog .db-summary{grid-template-columns:1fr}
}

/* V0.06: bewusster Austausch eines bestehenden QR-Codes */
button.danger-outline{
  border-color:var(--danger);
  color:var(--danger);
  background:#fff
}
button.danger-outline:hover{
  background:#fff2f0;
  border-color:#8f1b13
}

/* V0.08 – feste Ausgabeart PDF/JPG */
#docOutputTypeLabel[readonly]{background:#f3f5f9;cursor:default}
.type-choice{display:flex!important;gap:.8rem;align-items:flex-start;border:1px solid var(--border);border-radius:12px;padding:.85rem;margin:.55rem 0;cursor:pointer}
.type-choice input{margin-top:.25rem}.type-choice span{display:grid;gap:.2rem}.type-choice small{color:var(--muted)}
.image-viewer{min-height:100vh;background:#e9edf4}
.image-stage{height:calc(100vh - 64px);overflow:auto;padding:18px;text-align:center;touch-action:pan-x pan-y}
.image-stage img{display:inline-block;max-width:none;height:auto;transform-origin:top center;user-select:none;-webkit-user-drag:none;box-shadow:0 4px 22px rgba(0,0,0,.18)}
.jpg-render-sheet{position:fixed;left:-30000px;top:0;width:1200px;box-sizing:border-box;background:#fff;color:#111;padding:80px;font-family:Arial,Helvetica,sans-serif}
.jpg-render-sheet h1{font-size:42px;margin:0 0 42px}.jpg-render-sheet h2{font-size:28px;margin:32px 0 14px}
.jpg-render-sheet .jpg-text{font-size:22px;line-height:1.5}.jpg-render-sheet .jpg-block{margin-bottom:34px}
.jpg-render-sheet img{display:block;max-width:100%;height:auto;margin:0 auto 14px}
.jpg-render-sheet .jpg-caption{text-align:center;font-size:18px;color:#444;margin-bottom:10px}
.jpg-render-sheet .jpg-contact{margin-top:42px;padding-top:18px;border-top:1px solid #bbb;font-size:18px}
@media(max-width:700px){.image-stage{padding:8px}.image-viewer .viewer-actions{width:100%;justify-content:center}}

/* V0.09 – gemeinsamer Dropbox-/Datenbank-Einstieg */
.database-connect-panel{display:grid;gap:.65rem}
.database-connect-panel h3{margin:.2rem 0}
.inline-status-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
#dbDropboxState{padding:.45rem .7rem;border-radius:999px;background:#eef2f7}