:root{
  --bg:#f5f7fb;
  --panel:#f5f7fb;
  --panel2:#f5f7fb;
  --card:#ffffff;
  --line:rgba(0,0,0,.18);
  --text:#0b1220;
  --muted:#5b677a;
  --blue:#006ca0;
  --pill:#e8eff7;
  --shadow:0 2px 10px rgba(16,24,40,.08);
  --radius:14px;
  --font:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);margin:0;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
.small{font-size:12px}.muted{color:var(--muted)}
:root{--unread:#e2b400;--unread-soft:#fff8d8;--unread-line:#efd86f;}

.topbar{position:sticky;top:0;z-index:50;background:var(--panel2);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.topbar-inner-wide{max-width:none;padding:10px 14px}
.brand{display:flex;gap:10px;align-items:center;min-width:250px}
.brand-logo{width:36px;height:36px;border-radius:10px;object-fit:contain}
.brand-title{font-size:14px;font-weight:900;color:var(--blue)}
.nav-right{display:flex;gap:10px;align-items:center}
.topbar-actions-row{gap:8px}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.compact-card{padding:10px}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:1fr 1fr}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px}
.field label{display:block;font-size:12px;color:var(--muted);font-weight:600}
.input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit}
textarea.input{min-height:100px;resize:vertical}

.btn{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;font-weight:600;cursor:pointer}
.btn:hover{background:var(--panel2)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{filter:brightness(.96)}
.btn.small{padding:6px 9px;border-radius:9px;font-size:12px}
.btn.active{background:#e8eff7;border-color:rgba(0,108,160,.25);color:var(--blue)}

.login-wrap{min-height:calc(100vh - 60px);display:grid;place-items:center;padding:22px}
.login-card{max-width:420px;width:100%}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#111;color:#fff;padding:10px 12px;border-radius:12px;opacity:0;pointer-events:none;transition:.18s;max-width:min(520px,calc(100vw - 24px));z-index:100}
.toast.show{opacity:1}

.aufmass-shell{display:grid;grid-template-columns:260px 1fr;gap:12px;padding:12px;min-height:calc(100vh - 62px)}
.aufmass-shell.sidebar-collapsed{grid-template-columns:56px 1fr}
.aufmass-sidebar{display:flex;flex-direction:column;gap:12px;min-width:0;transition:.18s ease;min-height:calc(100vh - 86px)}
.sidebar-card{min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
.sidebar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sidebar-actions{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.sidebar-new-record{flex:1;min-width:0}
.sidebar-toggle-btn{width:42px;min-width:42px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#f4f6f8}
.sidebar-toggle-lines{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:18px;height:18px}
.sidebar-toggle-lines span{display:block;width:16px;height:2px;background:#5b6472;border-radius:999px;margin:0}
.sidebar-search{margin-bottom:10px}
.sidebar-sort-wrap{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.sidebar-sort-label{font-size:12px;font-weight:700;color:var(--muted)}
.sidebar-sort-select{padding-right:34px}
.record-tree{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow:auto;padding-right:4px}
.record-group{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;flex:0 0 auto}
.record-head{padding:9px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;background:#f8fbff}
.record-head-main{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;min-width:0}
.record-head-text{min-width:0;overflow:hidden}
.record-head.active{background:#dfeef8;border-left:4px solid var(--blue);padding-left:6px}
.record-head.has-unread{background:var(--unread-soft);border-left:4px solid var(--unread);padding-left:6px}
.record-head.has-unread.active{background:var(--unread-soft);border-left-color:var(--unread)}
.record-group.has-unread{border-color:rgba(226,180,0,.45)}
.page-item.unread{background:#fffdf1;border-color:rgba(226,180,0,.38)}
.page-item.unread .page-item-title{position:relative;padding-right:14px}
.page-item.unread .page-item-title::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:999px;background:var(--unread)}
record-head-title{font-weight:700;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.record-head-sub{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.record-expand{flex:0 0 auto;font-size:11px;color:var(--muted)}
.record-head-tools{display:flex;align-items:center;gap:6px}
.record-info-btn{width:26px;min-width:26px;height:26px;padding:0;border-radius:999px;display:grid;place-items:center;font-size:14px;font-weight:800;background:#eef5fb}
.page-list{padding:8px;display:flex;flex-direction:column;gap:6px}
.page-item{padding:8px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:#fff}
.page-item.active{background:#eaf3fa;border-color:rgba(0,108,160,.3)}
.page-item-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-item-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-add-btn{margin-top:4px;width:100%;justify-content:center;background:#f8fbff}
.empty-note{padding:8px 2px;color:var(--muted);font-size:12px}

.stage-card{min-height:calc(100vh - 86px)}
.stage-toolbar{justify-content:flex-start;margin-bottom:10px;gap:12px}
.onebar{display:flex;align-items:center;gap:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.04);overflow:visible}
.toolbar-group{display:inline-flex;align-items:center;gap:8px;padding:6px 8px;background:transparent;border:0;border-radius:0;box-shadow:none}
.toolbar-group-soft{background:transparent}
.onebar > .toolbar-group + .toolbar-group{border-left:1px solid var(--line)}
.onebar > .toolbar-group:last-child{padding-right:10px}
.sheet-tools-left .btn.small{height:34px}
.sheet-tools-left .btn.small.active{box-shadow:inset 0 0 0 1px rgba(0,108,160,.18)}
.stage-print-btn{background:#fff;white-space:nowrap}

.sheet-stage-wrap{background:#d9dde2;border:1px solid var(--line);border-radius:16px;padding:20px;overflow:auto;min-height:calc(100vh - 160px);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:contain}
.sheet{width:794px;min-height:1123px;margin:0 auto;background:#fff;position:relative;box-shadow:0 10px 30px rgba(15,23,42,.15);overflow:hidden;border-radius:6px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.a4-grid{background-image:linear-gradient(#d6e8f7 1px, transparent 1px), linear-gradient(90deg, #d6e8f7 1px, transparent 1px), linear-gradient(#b4d4ef 1px, transparent 1px), linear-gradient(90deg, #b4d4ef 1px, transparent 1px);background-size:18px 18px,18px 18px,90px 90px,90px 90px;background-position:0 0,0 0,0 0,0 0}
.sheet-header{position:absolute;left:28px;right:28px;top:18px;z-index:12;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;background:rgba(255,255,255,.88);padding:6px 2px 10px;border-bottom:1px solid rgba(0,0,0,.14);pointer-events:none;-webkit-user-select:none;user-select:none}
.sheet-header.slim{padding-top:0}
.sheet-title-btn{border:0;background:transparent;padding:0;margin:0;text-align:left;cursor:pointer;pointer-events:auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sheet-title-btn:hover .sheet-headline{text-decoration:underline}
.sheet-headline{font-size:24px;font-weight:700;line-height:1.15}
.sheet-subline{font-size:13px;color:#334155;margin-top:4px}
.sheet-page-meta{text-align:right;font-size:13px;color:#475569;font-weight:600}
#drawingCanvas{position:absolute;inset:0;z-index:8;width:100%;height:100%;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.sheet-tools-left{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.38);display:grid;place-items:center;padding:20px;z-index:90}
.modal-backdrop[hidden]{display:none !important}
.modal-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.18);padding:16px;width:min(760px,100%)}
.modal-card-narrow{width:min(620px,100%)}
.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.modal-title{font-size:22px;font-weight:800}
.modal-grid{grid-template-columns:1fr 1fr}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

.print-shell{padding:18px;background:#fff}
.print-page{page-break-after:always;break-after:page;width:794px;min-height:1123px;margin:0 auto 20px;background:#fff;border:1px solid #ddd;position:relative;overflow:hidden}
.print-page:last-child{page-break-after:auto;break-after:auto}
.print-header{display:flex;justify-content:space-between;gap:12px;padding:22px 28px 10px;border-bottom:1px solid rgba(0,0,0,.14);position:relative;z-index:12}
.print-title{font-size:24px;font-weight:700}
.print-sub{font-size:13px;color:#475569;margin-top:4px}
.print-drawing{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.print-notes{position:absolute;left:28px;right:28px;bottom:24px;background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:10px 12px;white-space:pre-wrap;font-size:13px;z-index:3}

@media (max-width:1200px){
  .aufmass-shell{grid-template-columns:250px 1fr}
}
@media (max-width:980px){
  .aufmass-shell{grid-template-columns:56px 1fr}
  .sheet-stage-wrap{padding:10px}
  .modal-grid{grid-template-columns:1fr}
}
@media print{ body{background:#fff}.topbar,.toast,.modal-backdrop{display:none !important} }

.icon-btn{width:36px;min-width:36px;padding-inline:0;font-size:16px}
.input-compact{height:34px;padding:0 10px;min-width:104px;width:auto}
.toggle-inline{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 10px;height:34px}
.toggle-inline input{margin:0}
.sheet-stage-wrap.fit-page{display:grid;place-items:center;overflow:hidden}
.sheet-stage-wrap.fit-page .sheet{margin:0;transform-origin:top center}
@media (max-width:1200px){
  .aufmass-shell{grid-template-columns:300px 1fr}
}



.aufmass-shell.sidebar-collapsed .sidebar-card{padding:8px 6px;align-items:center}
.aufmass-shell.sidebar-collapsed .sidebar-head,
.aufmass-shell.sidebar-collapsed .sidebar-new-record,
.aufmass-shell.sidebar-collapsed .sidebar-search,
.aufmass-shell.sidebar-collapsed .record-tree{display:none}
.aufmass-shell.sidebar-collapsed .sidebar-actions{margin:0;width:100%;justify-content:center}
.aufmass-shell.sidebar-collapsed .sidebar-toggle-btn{width:42px;min-width:42px}
.aufmass-shell.sidebar-collapsed .sidebar-toggle-lines span{width:16px}

body.field-mode .topbar{display:none}
body.field-mode .aufmass-shell{grid-template-columns:1fr;padding:0;min-height:100vh}
body.field-mode .aufmass-sidebar{display:none}
body.field-mode .aufmass-main{padding:0}
body.field-mode .stage-card{border:none;border-radius:0;box-shadow:none;padding:0;min-height:100vh;background:#d9dde2}
body.field-mode .stage-toolbar{position:sticky;top:0;z-index:60;background:rgba(245,247,251,.96);backdrop-filter:blur(6px);padding:8px 10px;margin:0;border-bottom:1px solid var(--line);justify-content:flex-start}
body.field-mode #pageMetaHint{display:none}
body.field-mode .sheet-stage-wrap{min-height:calc(100vh - 54px);border:none;border-radius:0;padding:0;background:#cfd4db}
body.field-mode .sheet-stage-wrap.fit-page{place-items:center}
body.field-mode .sheet-tools-left{gap:6px}
body.field-mode #toggleSidebar, body.field-mode #newRecordBtn, body.field-mode #newPageBtn, body.field-mode #printBtn, body.field-mode #userBox{display:none !important}
body.field-mode .input-compact{min-width:88px}
.sheet-stage-wrap{touch-action:none;overscroll-behavior:contain}
#drawingCanvas{touch-action:none;cursor:crosshair}
body.field-mode #drawingCanvas{touch-action:none}


body.pen-only .sheet-stage-wrap, body.pen-only .sheet, body.pen-only #drawingCanvas, body.pen-only .sheet *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
body.pen-only #drawingCanvas{ cursor:crosshair; }
@media (max-width:980px){ .onebar{gap:0}.toolbar-group{padding:6px}.input-compact{min-width:78px} }


html,body{height:100%}
body{overflow:hidden}
.aufmass-shell{height:calc(100vh - 74px);min-height:0;overflow:hidden}
.aufmass-sidebar,.aufmass-main,.stage-card,.sheet-stage-wrap,.sidebar-card{min-height:0}
.aufmass-sidebar,.aufmass-main{height:100%}
.sidebar-card{height:100%;overflow:hidden}
.record-tree{overflow:auto;overscroll-behavior:contain}
.aufmass-main{overflow:hidden}
.stage-card{height:100%;overflow:hidden}
.sheet-stage-wrap{height:100%;min-height:0}
.record-info-btn{border-radius:10px}
.sidebar-toggle-btn{border-radius:12px;padding:0;position:relative}
.sidebar-toggle-lines span{width:16px;height:2px;margin:0;background:#5b6472}

.check-row{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text);cursor:pointer}
.check-row input{margin:0}
.unread-check-row{margin-top:10px;padding:10px 12px;border:1px solid var(--unread-line);border-radius:12px;background:#fffdf1}
.btn.danger{border-color:rgba(185,28,28,.2);color:#7f1d1d;background:#fff}
.btn.danger:hover{background:#fef2f2}


.sidebar-toggle-btn{display:grid;place-items:center;background:#f5f7fb}
.sidebar-toggle-firefox{display:grid;gap:4px;justify-items:center}
.sidebar-toggle-firefox span{display:block;width:15px;height:2px;border-radius:999px;background:#606a78}
.aufmass-shell.sidebar-collapsed .sidebar-toggle-firefox span{width:15px}

.stage-toolbar{align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sheet-tools-left{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1 1 auto}
.sheet-tools-right{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 0 auto;margin-left:auto}
.toolbar-tools-main{gap:10px}
.toolbar-actions-main{gap:6px}
.tool-btn{gap:8px;padding-inline:12px}
.tool-label{display:inline-flex;align-items:center}
.tool-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px}
.tool-icon svg{width:18px;height:18px}
.icon-only-btn{width:36px;min-width:36px;padding:0;display:grid;place-items:center}
.icon-toggle{width:36px;min-width:36px;padding:0;justify-content:center;position:relative}
.icon-toggle input{position:absolute;inset:0;opacity:0;cursor:pointer}
.icon-toggle .tool-icon{color:#4b5563}
.icon-toggle:has(input:checked){background:#e8f2fa;border-color:rgba(0,108,160,.35);box-shadow:inset 0 0 0 1px rgba(0,108,160,.16)}
.icon-toggle:has(input:checked) .tool-icon{color:var(--blue)}
.danger-soft{color:#8b1e1e}
.danger-soft:hover{background:#fef2f2;border-color:rgba(185,28,28,.25)}
.stage-print-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding-inline:14px}
#fitPageBtn.active,#toolPen.active,#toolEraser.active,#toolMouse.active,#toolText.active{background:#e8f2fa;border-color:rgba(0,108,160,.35);color:var(--blue);box-shadow:inset 0 0 0 1px rgba(0,108,160,.14)}

@media (max-width:980px){
  .sheet-tools-right{width:100%;justify-content:flex-end}
}


.tool-popover-wrap{position:relative}
.toolbar-group-popovers{overflow:visible}
.tool-popover-trigger{position:relative}
.tool-popover{position:absolute;top:calc(100% + 8px);left:0;z-index:80;min-width:220px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(15,23,42,.18)}
.tool-popover[hidden]{display:none !important}
.tool-popover::before{content:"";position:absolute;top:-7px;left:22px;width:12px;height:12px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.tool-popover-title{font-size:12px;font-weight:800;color:#475569;text-transform:uppercase;letter-spacing:.03em;margin:2px 0 8px}
.size-chip-row,.color-chip-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.color-chip-row + .tool-popover-title,.size-chip-row + .tool-popover-title{margin-top:14px}
.size-chip,.color-chip{appearance:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0;cursor:pointer;transition:.15s ease}
.size-chip{width:34px;height:34px;display:grid;place-items:center}
.size-chip:hover,.color-chip:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.08)}
.size-chip.active,.color-chip.active{border-color:rgba(0,108,160,.42);box-shadow:inset 0 0 0 2px rgba(0,108,160,.14)}
.dot{display:block;border-radius:999px;background:currentColor;color:#111827}
.dot-1{width:4px;height:4px}
.dot-2{width:6px;height:6px}
.dot-3{width:10px;height:10px}
.dot-4{width:14px;height:14px}
.color-chip{width:28px;height:28px;border-radius:10px;background:var(--chip)}
.tool-select-hidden{display:none}
@media (max-width:980px){
  .tool-popover{left:0;right:auto;min-width:200px}
}

.tool-btn{min-width:40px}
.tool-btn .tool-label{display:none}

.object-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.selection-overlay{position:absolute;inset:0;z-index:5;pointer-events:none;touch-action:none}
.selection-overlay[hidden]{display:none !important}
.selection-overlay.active{display:block}
.selection-box{position:absolute;box-sizing:border-box;touch-action:none}
.selection-box canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.selection-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.selection-path path{fill:rgba(0,108,160,.08);stroke:#0b79b7;stroke-width:2.2;stroke-dasharray:7 5;vector-effect:non-scaling-stroke}
.selection-box::before{content:"";position:absolute;inset:-1px;border:1.5px dashed rgba(11,121,183,.45);border-radius:2px;pointer-events:none}
.selection-box.is-lassoing::before{display:none}
.selection-handle{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #0b79b7;box-shadow:0 3px 10px rgba(15,23,42,.18)}
.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}
.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}
.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}
.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}
.selection-box.is-lassoing .selection-handle{display:none}
.page-object{position:absolute;pointer-events:auto;box-sizing:border-box;touch-action:none}
.page-object.selected{outline:2px solid rgba(0,108,160,.55);outline-offset:2px}
.page-object-text{min-width:72px;min-height:30px;padding:4px 6px;border-radius:6px;background:transparent;font-size:22px;line-height:1.2;color:#111827;cursor:move;white-space:pre-wrap;z-index:2}
.page-object-image{border-radius:10px;overflow:visible;background:transparent;box-shadow:none;cursor:move;z-index:1}
.page-object-image img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none;border-radius:10px;box-shadow:0 6px 16px rgba(15,23,42,.12)}
.page-object-image.selected img{box-shadow:0 0 0 2px rgba(0,108,160,.32),0 6px 16px rgba(15,23,42,.12)}
.page-object-badge{position:absolute;top:-12px;left:0;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;color:#475569;box-shadow:0 4px 12px rgba(15,23,42,.08)}
.page-object-delete{position:absolute;top:-14px;right:-14px;width:30px;height:30px;border:none;border-radius:999px;background:#dc2626;color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(15,23,42,.22);cursor:pointer;z-index:3}
.page-object-delete:hover{transform:scale(1.05)}
.page-object-delete svg{width:15px;height:15px;display:block}
.page-object-handle{position:absolute;width:28px;height:28px;right:-14px;bottom:-14px;border-radius:999px;background:var(--blue);border:3px solid #fff;box-shadow:0 6px 16px rgba(15,23,42,.18);cursor:nwse-resize;z-index:2}
body.tool-text-mode #sheet, body.tool-text-mode #objectLayer{cursor:text}
body.tool-text-mode .object-layer{pointer-events:auto}
.object-layer-empty-hit{position:absolute;inset:0}


.sheet-page-created-by{margin-top:4px;font-size:12px;color:var(--muted);text-align:right;}
.btn[disabled], .input[disabled], textarea.input[disabled], select.input[disabled]{opacity:.55;cursor:not-allowed;}
.record-head-tools[hidden]{display:none !important;}



/* Blatt optisch veredelt, ohne Funktion zu ändern */
.sheet{
  border-radius:18px;
  box-shadow:0 14px 34px rgba(15,23,42,.16);
}

.sheet-header{
  border-radius:18px 18px 0 0;
  overflow:hidden;
}

.sheet-title-layout{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.sheet-page-logo{
  width:56px;
  height:56px;
  flex:0 0 56px;
  object-fit:contain;
  margin-top:0px;
  filter:drop-shadow(0 1px 1px rgba(15,23,42,.06));
}

.sheet-title-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* sichtbare Notiz am unteren Blattende */
.sheet-page-note{
  position:absolute;
  left:28px;
  right:28px;
  bottom:18px;
  z-index:6;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  background:rgba(255,255,255,.88);
  color:#334155;
  font-size:13px;
  line-height:1.35;
  white-space:pre-wrap;
  box-shadow:0 6px 16px rgba(15,23,42,.08);
  pointer-events:none;
}

.sheet-page-note[hidden]{
  display:none !important;
}



/* Header ganz bis oben in die Rundungen */
.sheet{
  overflow:hidden;
}

.sheet-header{
  left:0 !important;
  right:0 !important;
  top:0 !important;
  padding:18px 28px 14px !important;
  border-radius:18px 18px 0 0 !important;
}

/* Notiz ganz nach unten bis in die Rundungen */
.sheet-page-note{
  left:18px !important;
  right:18px !important;
  bottom:10px !important;
  border-radius:14px !important;
}


/* Korrektur: Seitennotiz sauber bis unten, ohne den Rest zu zerlegen */
.sheet-page-note{
  left:18px !important;
  right:18px !important;
  bottom:6px !important;
  margin:0 !important;
  border-radius:14px !important;
}


/* Feinschliff unten: Notiz bis ganz in die unteren Rundungen */
.sheet-page-note{
  left:12px !important;
  right:12px !important;
  bottom:0 !important;
  margin:0 !important;
  padding:10px 12px 14px 12px !important;
  border-radius:14px 14px 18px 18px !important;
}

/* letzter Feinschliff: wirklich bündig mit Blattkante */
.sheet-page-note{
  left:10px !important;
  right:10px !important;
  bottom:-2px !important;
  margin:0 !important;
  padding:10px 14px 16px 14px !important;
  border-radius:16px 16px 20px 20px !important;
}

/* Breiter machen – fast bis an die Blattkante */
.sheet-page-note{
  left:4px !important;
  right:4px !important;
  bottom:-2px !important;
  padding:10px 16px 16px 16px !important;
  border-radius:16px 16px 20px 20px !important;
}

/* Notiz wirklich bis zur Blattkante, ohne eigene Rundung */
.sheet-page-note{
  left:0px !important;
  right:0px !important;
  bottom:-2px !important;
  border-radius:0 !important;
  padding:10px 18px 16px 18px !important;
}

@media (max-width: 820px){
  body:not(.field-mode){overflow:auto}
  .aufmass-shell{
    grid-template-columns:1fr;
    height:auto;
    min-height:calc(100vh - 74px);
    overflow:visible;
  }
  .aufmass-shell.sidebar-collapsed{
    grid-template-columns:1fr;
  }
  .aufmass-sidebar,
  .aufmass-main,
  .stage-card,
  .sidebar-card{
    height:auto;
  }
  .aufmass-sidebar{
    min-height:0;
  }
  .aufmass-main{
    overflow:visible;
  }
  .stage-card{
    overflow:visible;
  }
  .sheet-stage-wrap{
    height:auto;
    min-height:60vh;
  }
}

.icon-only-btn[disabled]{opacity:.38;cursor:not-allowed;pointer-events:none}
body.tool-lasso-mode #sheet{cursor:crosshair}


html.tool-lasso-mode,
html.tool-lasso-mode body{
  touch-action:none !important;
  overscroll-behavior:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
}

body.tool-lasso-mode .sheet-stage-wrap,
body.tool-lasso-mode .sheet,
body.tool-lasso-mode #drawingCanvas,
body.tool-lasso-mode .selection-overlay,
body.tool-lasso-mode .selection-box,
body.tool-lasso-mode .selection-box canvas,
body.tool-lasso-mode .selection-path,
body.tool-lasso-mode .selection-path *{
  touch-action:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
  -webkit-tap-highlight-color:transparent !important;
}

/* iPad / Safari Fix: Datumfeld im Seiteninfos-Modal nicht aufblähen */
#pageModalBackdrop .grid.two > .field,
#pageModalBackdrop .modal-grid > .field{
  min-width:0;
}

#pageModalBackdrop input[type="date"].input{
  min-width:0;
  width:100%;
  max-width:100%;
  height:42px;
  line-height:1.2;
  padding:10px 12px;
  -webkit-appearance:none;
  appearance:none;
}

@supports (-webkit-touch-callout: none){
  #pageModalBackdrop input[type="date"].input{
    font-size:16px;
  }
}



/* Fotoseite / Galerie */
.photo-gallery-layer{
  position:absolute;
  inset:126px 18px 18px 18px;
  z-index:7;
  overflow:auto;
  pointer-events:auto;
}

.is-hidden-photo-mode{
  display:none !important;
}

.photo-page-wrap{
  min-height:100%;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  padding:18px;
}

.photo-page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.photo-page-title{
  font-size:20px;
  font-weight:800;
  color:#0f172a;
}

.photo-page-subtitle{
  font-size:13px;
  color:#64748b;
  margin-top:2px;
}

.photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:16px;
}

.photo-card{
  appearance:none;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  border-radius:16px;
  padding:10px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(15,23,42,.07);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.photo-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(15,23,42,.12);
  border-color:rgba(14,116,144,.28);
}

.photo-card-image-wrap{
  display:block;
  border-radius:12px;
  overflow:hidden;
  background:#e5e7eb;
  aspect-ratio: 4 / 3;
}

.photo-card-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.photo-card-caption{
  display:block;
  margin-top:10px;
  font-size:13px;
  font-weight:700;
  color:#0f172a;
}

.photo-grid-empty{
  grid-column:1 / -1;
  border:1px dashed rgba(15,23,42,.16);
  border-radius:16px;
  background:#f8fafc;
  color:#475569;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.photo-viewer-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(2,6,23,.82);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}

.photo-viewer-dialog{
  position:relative;
  width:min(96vw, 1500px);
  height:min(92vh, 980px);
  display:grid;
  grid-template-columns:64px 1fr 64px;
  align-items:center;
  gap:12px;
}

.photo-viewer-figure{
  margin:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.photo-viewer-image{
  max-width:100%;
  max-height:calc(100% - 42px);
  object-fit:contain;
  border-radius:16px;
  background:#0f172a;
  box-shadow:0 20px 48px rgba(0,0,0,.35);
}

.photo-viewer-caption{
  color:#e2e8f0;
  font-size:14px;
  text-align:center;
}

.photo-viewer-nav,
.photo-viewer-close{
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:999px;
  cursor:pointer;
  backdrop-filter:blur(8px);
}

.photo-viewer-nav{
  width:52px;
  height:52px;
  font-size:28px;
  line-height:1;
}

.photo-viewer-close{
  position:absolute;
  top:-6px;
  right:-6px;
  width:46px;
  height:46px;
  font-size:28px;
  line-height:1;
}

body.photo-viewer-open{
  overflow:hidden;
}

@media (max-width: 900px){
  .photo-gallery-layer{
    inset:110px 10px 10px 10px;
  }
  .photo-page-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .photo-grid{
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:12px;
  }
  .photo-viewer-dialog{
    width:min(100vw, 1000px);
    height:min(94vh, 900px);
    grid-template-columns:44px 1fr 44px;
    gap:8px;
  }
  .photo-viewer-nav{
    width:40px;
    height:40px;
    font-size:22px;
  }
}


.photo-page-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.photo-card{
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  border-radius:16px;
  padding:10px;
  text-align:left;
  box-shadow:0 6px 18px rgba(15,23,42,.07);
}

.photo-card-viewer{
  appearance:none;
  width:100%;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:block;
}

.photo-card-meta{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.photo-card-label{
  font-size:13px;
  font-weight:700;
  color:#0f172a;
}

.photo-card-caption-input{
  width:100%;
  min-height:64px;
  resize:vertical;
  border:1px solid rgba(15,23,42,.12);
  border-radius:12px;
  padding:10px 12px;
  font:inherit;
  font-size:13px;
  line-height:1.4;
  background:#fff;
  color:#0f172a;
}

.photo-card-caption-input:focus{
  outline:none;
  border-color:rgba(14,116,144,.45);
  box-shadow:0 0 0 3px rgba(14,116,144,.12);
}

.photo-card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.btn.danger{
  border-color:rgba(220,38,38,.22);
  color:#991b1b;
}


/* Fotoseite Feinschliff */
.photo-gallery-layer{
  background: transparent !important;
}

.photo-page-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 12px 12px !important;
}

.photo-page-header{
  margin-bottom: 14px !important;
}

.photo-page-header-actions-only{
  display: flex;
  justify-content: flex-end;
}

.photo-page-btn{
  background: #0b6ea8 !important;
  color: #fff !important;
  border-color: #0b6ea8 !important;
  box-shadow: 0 6px 18px rgba(11,110,168,.18);
}

.photo-page-btn:hover:not(:disabled){
  background: #095d8e !important;
  border-color: #095d8e !important;
}

.photo-page-btn:disabled{
  background: #9fb8c7 !important;
  border-color: #9fb8c7 !important;
  color: #eef6fa !important;
}

.photo-card{
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(2px);
}

.photo-card-meta{
  margin-top: 8px;
}

.photo-card-actions{
  justify-content: flex-start;
}

.photo-card-label,
.photo-card-caption-input,
.photo-page-title,
.photo-page-subtitle{
  display: none !important;
}


/* PNG-Fix + Fotoseite nur mit Mülleimer */
.photo-card{
  position: relative;
}

.photo-card-delete{
  position:absolute;
  top:8px;
  right:8px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(220,38,38,.22);
  background:rgba(255,255,255,.96);
  color:#c62828;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.12);
  z-index:3;
}

.photo-card-delete svg{
  width:16px;
  height:16px;
}

.photo-card-delete:hover{
  background:#fff5f5;
}


/* Fotoseite final: nur Mülleimer */
.photo-card{
  position: relative;
}

.photo-card-delete{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(220,38,38,.22);
  background: rgba(255,255,255,.96);
  color: #c62828;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15,23,42,.12);
  z-index: 5;
}
.photo-card-delete svg{
  width: 16px;
  height: 16px;
}
.photo-card-delete:hover{
  background: #fff5f5;
}
.photo-card .photo-card-meta,
.photo-card .photo-card-actions,
.photo-card .photo-card-label,
.photo-card .photo-card-caption-input{
  display: none !important;
}


/* Viewer-Fix: feste Bedienelemente am Viewport */
.photo-viewer-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2,6,23,.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.photo-viewer-stage{
  position: relative;
  width: min(88vw, 1400px);
  height: min(88vh, 940px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.photo-viewer-figure{
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
}

.photo-viewer-image{
  display: block;
  max-width: min(88vw, 1400px);
  max-height: calc(min(88vh, 940px) - 48px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  background: #0f172a;
  box-shadow: 0 22px 60px rgba(0,0,0,.38);
}

.photo-viewer-caption{
  color: #e2e8f0;
  font-size: 14px;
  text-align: center;
  letter-spacing: .02em;
}

.photo-viewer-close-fixed,
.photo-viewer-nav-fixed{
  appearance: none;
  position: fixed;
  z-index: 10020;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(15,23,42,.72);
  color: #fff;
  backdrop-filter: blur(10px);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

.photo-viewer-close-fixed{
  top: 22px;
  right: 22px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  font-size: 30px;
  line-height: 1;
}

.photo-viewer-nav-fixed{
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 74px;
  border-radius: 16px;
  font-size: 34px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-viewer-nav-fixed.prev{ left: 20px; }
.photo-viewer-nav-fixed.next{ right: 20px; }

.photo-viewer-close-fixed:hover,
.photo-viewer-nav-fixed:hover{
  background: rgba(30,41,59,.92);
}

@media (max-width: 900px){
  .photo-viewer-overlay{
    padding: 16px;
  }
  .photo-viewer-stage{
    width: min(84vw, 1000px);
    height: min(82vh, 760px);
  }
  .photo-viewer-image{
    max-width: min(84vw, 1000px);
    max-height: calc(min(82vh, 760px) - 44px);
  }
  .photo-viewer-close-fixed{
    top: 14px;
    right: 14px;
    width: 46px;
    height: 46px;
    font-size: 26px;
  }
  .photo-viewer-nav-fixed{
    width: 44px;
    height: 64px;
    font-size: 28px;
  }
  .photo-viewer-nav-fixed.prev{ left: 10px; }
  .photo-viewer-nav-fixed.next{ right: 10px; }
}

/* alte Viewer-Elemente neutralisieren */
.photo-viewer-dialog,
.photo-viewer-nav,
.photo-viewer-close{
  all: unset;
  display: none !important;
}

/* FIX: Close Button immer klickbar */
.photo-viewer-close-fixed{
  pointer-events: auto;
  z-index: 20000;
}
.photo-viewer-overlay{
  pointer-events: auto;
}
.photo-viewer-stage{
  pointer-events: none;
}


/* X-Button hart fixiert */
.photo-viewer-close-fixed{
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
  isolation: isolate;
}

.photo-viewer-nav-fixed{
  z-index: 999998 !important;
  pointer-events: auto !important;
}

.photo-viewer-overlay *{
  box-sizing: border-box;
}


/* X-Button Vollfix */
.photo-viewer-close-fixed{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  width: 56px !important;
  height: 56px !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
}


/* Akten-Dateien */
.record-files{
  margin-top: 10px;
  padding: 10px 10px 6px;
  border-top: 1px solid rgba(15,23,42,.08);
}

.record-files-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.record-files-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#64748b;
}

.record-file-upload-btn{
  background:#0b6ea8;
  border-color:#0b6ea8;
  color:#fff;
}
.record-file-upload-btn:hover{
  background:#095d8e;
  border-color:#095d8e;
}

.record-file-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.record-file-item{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.94);
  border-radius:14px;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.record-file-item:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(15,23,42,.08);
  border-color:rgba(11,110,168,.25);
}

.record-file-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}

.record-file-badge{
  flex:0 0 auto;
  min-width:44px;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(11,110,168,.10);
  color:#0b6ea8;
  font-size:11px;
  font-weight:800;
  text-align:center;
}

.record-file-text{
  min-width:0;
}
.record-file-name{
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:210px;
}
.record-file-sub{
  font-size:11px;
  color:#64748b;
  margin-top:2px;
}

.record-file-delete{
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(220,38,38,.18);
  background:#fff;
  color:#c62828;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.record-file-delete svg{
  width:16px;
  height:16px;
}
.record-file-delete:hover{
  background:#fff5f5;
}

.record-files-empty{
  padding:8px 2px 2px;
}


.record-file-dropzone,
.photo-dropzone{
  appearance:none;
  border:1px dashed rgba(11,110,168,.34);
  background:rgba(11,110,168,.06);
  color:#0b6ea8;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}

.record-file-dropzone:hover,
.photo-dropzone:hover{
  background:rgba(11,110,168,.10);
  border-color:rgba(11,110,168,.52);
}

.record-file-dropzone.is-dragover,
.photo-dropzone.is-dragover{
  background:rgba(11,110,168,.16);
  border-color:#0b6ea8;
  box-shadow:0 0 0 3px rgba(11,110,168,.12);
  transform:translateY(-1px);
}

.record-file-dropzone{
  width:100%;
  margin:0 0 10px;
  padding:10px 12px;
  text-align:center;
}

.photo-dropzone{
  min-width:152px;
  height:32px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@media (max-width: 900px){
  .photo-dropzone{
    width:100%;
    min-width:0;
  }
}

.page-lock-status{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 1px 2px rgba(16,24,40,.04);}
.page-lock-status.free{background:#fff;color:#64748b;}
.page-lock-status.own{background:#ecfdf5;border-color:rgba(22,163,74,.22);color:#166534;}
.page-lock-status.foreign{background:#fff7ed;border-color:rgba(245,158,11,.28);color:#9a3412;}
@media (max-width:980px){.page-lock-status{order:3;width:100%;justify-content:flex-start;}}


.eraser-preview{
  position:fixed;
  left:0;
  top:0;
  width:18px;
  height:18px;
  transform:translate(-50%,-50%);
  border:2px solid rgba(15,23,42,.9);
  border-radius:999px;
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 2px 8px rgba(15,23,42,.22);
  pointer-events:none;
  z-index:2147483647;
}
.eraser-preview[hidden]{display:none !important;}
body.eraser-preview-active #drawingCanvas,
body.eraser-preview-active .sheet-stage-wrap{
  cursor:none !important;
}