/* Layout: Ablage-Spalte links (Dossiers), Arbeitsfläche rechts mit Werkzeugleiste und PDF-Seiten wie auf einem Zeichentisch */
:root{
  --bg:#e7ebef; --panel:#f6f8fa; --paper:#ffffff; --fg:#17212b; --muted:#5b6876;
  --line:#cdd5dd; --accent:#1f5fd1; --accent-ink:#ffffff; --accent-soft:#dbe6fa;
  --warn:#b5361f; --ok:#22794a; --shadow:0 1px 2px rgba(23,33,43,.08),0 6px 18px rgba(23,33,43,.10);
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12171d; --panel:#1a2129; --paper:#ffffff; --fg:#e5eaf0; --muted:#97a3b0;
  --line:#2d3743; --accent:#6d9bf2; --accent-ink:#0d1420; --accent-soft:#1f2f4a;
  --warn:#ef7a62; --ok:#5cc58a; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12171d; --panel:#1a2129; --paper:#ffffff; --fg:#e5eaf0; --muted:#97a3b0;
  --line:#2d3743; --accent:#6d9bf2; --accent-ink:#0d1420; --accent-soft:#1f2f4a;
  --warn:#ef7a62; --ok:#5cc58a; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35); color-scheme:dark}

html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.5}
*{box-sizing:border-box}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{height:100%;display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.top{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding-block:10px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  border-bottom:1px solid var(--line);background:var(--panel)}
.brand{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.brand .tab{width:22px;height:16px;border:2px solid var(--fg);border-radius:2px 6px 2px 2px;position:relative}
.brand .tab::before{content:"";position:absolute;left:-2px;top:-6px;width:10px;height:5px;border:2px solid var(--fg);border-bottom:0;border-radius:3px 3px 0 0}
.who{margin-left:auto;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;min-width:0}
.who .lock{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap}
.menu-btn{display:none;border:1px solid var(--line);background:var(--paper);color:#17212b;border-radius:8px;padding:6px 10px}

/* Ablage */
.side{border-right:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.side-head{padding:16px;display:grid;gap:10px;border-bottom:1px solid var(--line)}
.label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.upload{display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--accent);color:var(--accent);
  background:var(--accent-soft);border-radius:10px;padding:12px;font-weight:600;text-align:center}
.upload input{display:none}
.list{overflow:auto;padding:8px;display:grid;gap:4px;align-content:start;min-height:0;flex:1}
.item{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;border:1px solid transparent;background:none;text-align:left;width:100%}
.item:hover{background:var(--bg)}
.item.on{background:var(--paper);border-color:var(--line);box-shadow:var(--shadow);color:#17212b}
.item.on .meta{color:#5b6876}
.doc-ico{width:24px;height:30px;border:1.5px solid currentColor;border-radius:2px 8px 2px 2px;opacity:.7;font-family:var(--f-mono);font-size:8px;display:grid;place-items:end center;padding-bottom:3px}
.name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.empty-list{padding:16px;color:var(--muted);font-size:13px}

/* Arbeitsfläche */
.main{display:flex;flex-direction:column;min-height:0;min-width:0}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:8px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  border-bottom:1px solid var(--line);background:var(--panel)}
.bar .title{font-family:var(--f-display);font-weight:700;font-size:16px;min-width:0;max-width:280px;border:1px solid transparent;background:none;border-radius:6px;padding:4px 6px;text-overflow:ellipsis}
.bar .title:hover,.bar .title:focus{border-color:var(--line);background:var(--bg)}
.group{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}
.tool{border:0;background:none;border-radius:7px;padding:6px 10px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px}
.tool[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.tool:disabled{opacity:.4;cursor:default}
.tool svg{width:16px;height:16px}
.sw{width:22px;height:22px;border-radius:50%;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line);padding:0}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent)}
.spacer{flex:1}
.status{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.status.saving{color:var(--accent)} .status.err{color:var(--warn)} .status.ok{color:var(--ok)}
.btn{border:1px solid var(--line);background:var(--paper);color:#17212b;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600}
.btn.danger{color:#b5361f}
.zoomv{font-family:var(--f-mono);font-size:12px;min-width:44px;text-align:center;font-variant-numeric:tabular-nums}

.desk{flex:1;overflow:auto;padding:24px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px));min-height:0}
.pages{display:grid;gap:22px;justify-content:center}
.page{position:relative;background:var(--paper);box-shadow:var(--shadow);border-radius:2px}
.page canvas.pdf{display:block;width:100%;height:100%}
.page .pno{position:absolute;right:-2px;top:100%;margin-top:4px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.page svg.ink{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.page .texts{position:absolute;inset:0;pointer-events:none}
.page .texts .tb{pointer-events:auto}
.desk[data-tool="pen"] svg.ink,.desk[data-tool="mark"] svg.ink{cursor:crosshair}
.desk[data-tool="text"] svg.ink{cursor:text}
.desk[data-tool="erase"] svg.ink{cursor:cell}
.desk[data-tool="hand"] svg.ink{pointer-events:none}
.tb{position:absolute;min-width:40px}
.tb textarea{display:block;width:100%;border:1px dashed transparent;background:transparent;resize:horizontal;overflow:hidden;
  font-family:Helvetica,Arial,sans-serif;line-height:1.2;padding:0;margin:0;min-height:1.2em;color:inherit}
.tb textarea:hover{border-color:rgba(31,95,209,.45)}
.tb textarea:focus{outline:none;border-color:#1f5fd1;background:transparent}
.tb .grip{position:absolute;left:-18px;top:0;width:16px;height:16px;border-radius:4px;background:#1f5fd1;color:#fff;font-size:10px;display:none;place-items:center;cursor:move;touch-action:none;border:0;padding:0}
.tb:focus-within .grip{display:grid}
.desk[data-tool="erase"] .tb textarea{cursor:cell}
.slot{position:absolute;pointer-events:none;border-bottom:2px dashed rgba(31,95,209,.55);background:rgba(31,95,209,.07);border-radius:2px 2px 0 0;display:none}
.desk[data-tool="text"] .slot{display:block;pointer-events:auto;cursor:text}
.desk[data-tool="text"] .slot:hover{background:rgba(31,95,209,.16)}
.slot.used{display:none!important}
.lf{position:absolute;pointer-events:auto;border:0;margin:0;padding:0 2px;background:transparent;border-radius:2px;color:#17212b;min-width:0;cursor:text}
.lf:hover{box-shadow:inset 0 -1px 0 rgba(31,95,209,.6)}
.lf:focus{outline:none;background:transparent;box-shadow:inset 0 -2px 0 #1f5fd1}
.desk[data-tool="pen"] .lf,.desk[data-tool="mark"] .lf,.desk[data-tool="erase"] .lf,
.desk[data-tool="pen"] .ff,.desk[data-tool="mark"] .ff,.desk[data-tool="erase"] .ff{pointer-events:none}
.ff{position:absolute;pointer-events:auto;border:0;background:transparent;box-shadow:inset 0 -1.5px 0 rgba(31,95,209,.6);font-family:Helvetica,Arial,sans-serif;color:#17212b;padding:0 2px;margin:0;resize:none;line-height:1.15;overflow:hidden}
.ff:focus{outline:none;box-shadow:inset 0 -2px 0 #1f5fd1}
input.ff[type=checkbox]{appearance:auto;accent-color:#1f5fd1;box-shadow:none;background:none;cursor:pointer}
select.fsel{border:0;background:none;font-size:13px;padding:4px 2px;border-radius:6px}
.item-row{position:relative}
.item-row .x{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);border-radius:6px;padding:4px 7px;font-size:15px;opacity:0}
.item-row:hover .x,.item-row .x:focus-visible{opacity:1}
.item-row .x:hover{color:var(--warn);background:var(--bg)}
.item-confirm{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;border:1px solid var(--warn);border-radius:8px;font-size:13px}
.item-confirm .btn{padding:3px 10px}
@media (hover:none){.item-row .x{opacity:1}}

/* Leerzustände */
.welcome{max-width:560px;margin:6vh auto 0;display:grid;gap:18px}
.welcome h1{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,4vw,36px);line-height:1.1;letter-spacing:-.02em;margin:0;text-wrap:balance}
.welcome p{margin:0;color:var(--muted);max-width:60ch}
.drop{border:2px dashed var(--line);border-radius:14px;padding:36px 20px;text-align:center;display:grid;gap:8px;background:var(--panel)}
.drop.over,.app.over .drop{border-color:var(--accent);background:var(--accent-soft)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;font-size:13px}
.steps div{border-top:2px solid var(--fg);padding-top:8px}
.steps b{display:block;font-family:var(--f-display)}
.notice{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:14px 16px;font-size:14px}
.progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}
.confirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;padding:8px 12px;border:1px solid var(--warn);border-radius:9px;background:var(--panel)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:9px;font-size:14px;z-index:50;max-width:calc(100% - 32px)}

@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr)}
  .menu-btn{display:inline-block}
  .side{position:fixed;z-index:40;left:0;top:0;bottom:0;width:min(86vw,320px);transform:translateX(-102%);transition:transform .2s;
    padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);box-shadow:var(--shadow)}
  .app.drawer .side{transform:none}
  .who .mail{display:none}
  .steps{grid-template-columns:minmax(0,1fr)}
  .bar .title{max-width:100%;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Anmeldung */
.auth{min-height:100%;display:grid;place-items:center;padding-block:32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.auth-card{width:min(400px,100%);display:grid;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 24px;box-shadow:var(--shadow)}
.auth-card .brand{font-size:22px}
.auth-card p{margin:0;color:var(--muted);font-size:14px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:2px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.tabs button{border:0;background:none;border-radius:8px;padding:8px;font-weight:600;font-size:14px}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.fld{display:grid;gap:6px;font-size:13px;font-weight:600}
.fld input{border:1px solid var(--line);background:var(--paper);color:#17212b;border-radius:9px;padding:11px 12px;font-size:16px;font-weight:400}
.fld input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.primary{border:0;background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:12px;font-weight:700;font-size:15px}
.primary:disabled{opacity:.6}
.linkbtn{border:0;background:none;color:var(--accent);padding:0;font-size:13px;text-decoration:underline;justify-self:start}
.msg{font-size:14px;border-radius:9px;padding:10px 12px;background:var(--accent-soft)}
.msg.err{background:transparent;border:1px solid var(--warn);color:var(--warn)}
.logout{border:1px solid var(--line);background:none;border-radius:8px;padding:4px 10px;font-size:12px;color:var(--muted)}
.install{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;padding:10px 12px;border:1px dashed var(--accent);border-radius:10px;background:var(--accent-soft)}
.install .btn{padding:4px 10px}


/* Version / Lizenz */
.plan{border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.plan.full{border-color:var(--line);background:none;color:var(--ok)}
.legal-links{font-size:12px;color:var(--muted);margin:0}
.legal-links a{color:var(--muted)}
.dlg{border:1px solid var(--line);border-radius:16px;padding:0;background:var(--panel);color:var(--fg);width:min(440px,calc(100% - 32px));box-shadow:var(--shadow)}
.dlg::backdrop{background:rgba(10,15,20,.45)}
.dlg-body{display:grid;gap:14px;padding:24px}
.dlg h2{margin:0;font-family:var(--f-display);font-size:20px;letter-spacing:-.01em}
.dlg p{margin:0;color:var(--muted);font-size:14px}
.dlg-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dlg-actions .primary{padding:9px 16px}
.dlg-actions a.btn{text-decoration:none;display:inline-block}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:0;font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0;overflow-wrap:anywhere}
.danger-zone{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:10px}
.danger-zone summary{cursor:pointer;color:var(--warn);font-size:13px;font-weight:600}
.danger-zone[open]{display:grid;gap:10px}
.danger-zone > *:not(summary){margin-top:10px}
#licCode{font-family:var(--f-mono);letter-spacing:.04em;text-transform:uppercase}
.limit{border:1px solid var(--accent);background:var(--accent-soft);border-radius:10px;padding:12px 14px;font-size:14px;display:grid;gap:8px}
.limit .primary{justify-self:start;padding:8px 14px}
@media (max-width:760px){ .plan{display:none} }